梳理下blog搭建所涉及的知识，框架：Node.js+Git+Hexo+Makrdown

前言

我的博客是基于node.js+git+Hexo+Markdown搭建的，代码托管在Github，域名从阿里云买的，映射到Github的IP。



环境安装

安装Node.js

在 Windows 环境下安装 Node.js 非常简单，仅须到官网下载安装文件并执行即可完成安装。安装无脑下一步即可。

安装Git

Git教程：传送门
下载链接：https://git-scm.com/downloads
安装完成后鼠标右键菜单多了两个选项
右键菜单栏

Git基本操作

用于blog备份，现在已经不需要了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 新建一个仓库
git init
# 配置仓库
git config
git config --global user.name "Your Name"
git config --global user.email "email@example.com"
# 将远程仓库复制到本地
git clone 项目地址
# 抓取远程仓库所有分支更新并合并到本地
git pull
# 将文件放到暂存区
git add 文件名/文件夹名
git add . 或者 git add --all # 全部内容
# 提交你的修改
git commit -m "注释"
# 远程仓库操作：增加/删除
git remote add 仓库名称 仓库地址
git remote rm 仓库名称
# 推送本地仓库更新到远程仓库
git push -u 远程名 本地分支
# 合并分支
git pull

Git提交远程库流程

将文件放入暂存区->提交修改->将本地更新推送到远程仓库

Hexo

常用命令

1
2
3
4
5
6
7
npm install hexo-cli -g # 全局安装hexo全家桶
npm install # 安装基础依赖
hexo init blog # 初始化配置
hexo generate # 生成本地静态文件,作用不大，本地查看不需要生成public文件夹；部署时直接hexo d默认先生成public(public文件夹不存在时)
hexo server # 查看本地效果,开启服务，地址：localhost:4000
hexo deploy # 远程部署,推送内容
hexo new 文章名 # 创建新文章

安装部署插件

1
npm install hexo-deployer-git --save

旧的部署配置

1
2
3
4
deploy:
  - type: git
    repo: git@git.coding.net:YuanLiChenAi/仓库名.git 
    branch: master

这是我参考的完整教程的博客 https://my.oschina.net/ryaneLee/blog/638440

新的部署配置

配置代码比原方式多一个分支，可以将源文件备份在分支中。
以如下代码为例，需要提前在仓库创建分支，并把src分支设置为默认分支，不然git clone的内容是master的内容，也就是hexo g生成的public。

1
2
3
4
5
6
7
8
9
10
11
12
deploy:
  - type: git
    repo: git@git.coding.net:YuanLiChenAi/仓库名.git 
    branch: master
  - type: git
    repo: git@git.coding.net:YuanLiChenAi/仓库名.git 
    branch: src
    extend_dirs: /
    ignore_hidden: false
    ignore_pattern:
        public: .
        .git: .

具体的部署流程：记一次部署迁移
完整的配置流程：玩转hexo - 1 - 蠢萌的序、玩转hexo - 2 - 起步、玩转hexo - 3 - 部署、玩转hexo - 4 - 主题.

  • git clone后需要将.git文件夹删除，
  • 安装hexo插件npm install hexo --save
  • 第一次部署时会生成.deploy_git文件夹，在下次部署时需要删除该文件夹，不然会部署失败
注意事项




Makrdown编写

Markdown语法：http://xianbai.me/learn-md/article/about/readme.html

Atom

问题太多，已经不用了，看下面的VScode

安装Atom

下载安装Atom：https://atom.io/

插件安装

markdown-preview-plus #增强预览，需要关闭自带的markdown-preview，与markdown-preview-enhanced冲突，已停用
atom-simplified-chinese-menu #中文包
language-markdown #代码高亮
markdown-preview-enhanced #可视化+同时滚动
markdown-table-editor #表格
markdown-image-paste #贴图，记得把_config.yml中的post_asset_folder设置为true，new文章会自动创建一个文件夹
markdown-themeable-pdf #pdf导出
pdf-view #pdf 查看

VScode

安装VScode

下载地址：https://code.visualstudio.com/

插件安装

Markdown Preview Enhanced #增强预览
Paste Image #贴图，Ctrl+Alt+V

预览按钮




mellow主题

我使用的主题是mellow
github地址：https://github.com/codefine/hexo-theme-mellow.git
预览地址：https://blog.lujingtao.com/

安装依赖

所需依赖：

1
2
3
4
hexo-generator-search #local search搜索
hexo-generator-topindex #文章置顶
hexo-helper-qrcode #二维码分享
hexo-renderer-less #less解析器

安装命令：

1
npm install --save hexo-generator-search hexo-generator-topindex hexo-helper-qrcode hexo-renderer-less

新建分类页

开启分类、标签页等，不仅需要在主题配置文件的menu中开启，还需要用命令行进行创建，具体方法：
先用hexo new page categories创建分类页源文件，然后在source/categories/index.md中修改layout: categories。

样式修改

自定义样式

路径：themes\mellow\source\css_custom\custom.less

修改的_partial/less文件

路径：themes\mellow\source\css_partial
文章css：variable.less
代码css：highlight.less

增加more按钮

最新版本已加入该功能
路径：themes\mellow\layout_partial\index-item.ejs

1
2
3
<a href="<%- url_for(post.path) %>" class="post-more waves-effect waves-button">
    <%- theme.excerpt_link %>
</a>

主题的config中增加

1
excerpt_link: more      #更多按钮


链接为域名


在博客config文件里修改


搜索按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<ul class="nav">
  <%
    var menuItem, isActive = function(item) {
        var pageUrl = url_for(page.path)
        return item.url === '/' ? pageUrl === url_for(item.url + 'index.html') : _.startsWith(pageUrl, url_for(item.url))
    };
    for (var i in theme.menu) {
      menuItem = theme.menu[i];
      if (menuItem.url) {
    %>
      <li class="<% if(isActive(menuItem)){ %> active<% } %>">
        <a href="<%- url_for(menuItem.url) %>" <% if(menuItem.target){ %>target="_blank"<% } %> >
          <i class="icon icon-lg icon-<%= menuItem.icon %>"></i>
          <%=(menuItem.text || _.startCase(i)) %>
        </a>
      </li>
  <% } else { %>
      <li>
        <a href="javascript:;" onclick="$('#site_search_btn').click();">
          <i class="icon icon-lg icon-<%= menuItem.icon %>"></i>
          <%=(menuItem.text || _.startCase(i)) %>
        </a>
      </li>
  <% } } %>
</ul>


注意这个search和其他的不一样，不能有url这个属性

领养一个小姐姐

github地址：https://github.com/EYHN/hexo-helper-live2d

安装

安装模块：

1
npm install --save hexo-helper-live2d

配置

在站点根目录的 _config.yml文件中添加配置.
示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: ./source/live2d_models/live2d-widget-model-koharu #模型位置及名称
  display:
    position: right
    width: 120
    height: 240
  mobile:
    show: true

模型

1.使用npm install 模型的包名来安装，下载的包在node_modules里面
2.将下载的包扔进配置中的位置./source/live2d_models/
模型预览：https://huaji8.top/post/live2d-plugin-2.0/
以下为所有模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

实物参考：https://huaji8.top/post/live2d-plugin-2.0/

部署gitalk评论系统

新增gitalk.ejs文件

在mellow\layout\_partial\_plugins目录下新增gitalk.ejs文件，配置如下：

gitalk.ejs配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<div id="gitalk-container"></div>
<script type="text/javascript">
      var gitalk = new Gitalk({
        clientID: '<%= theme.gitalk.ClientID %>',
        clientSecret: '<%= theme.gitalk.ClientSecret %>',
        repo: '<%= theme.gitalk.repo %>',
        owner: '<%= theme.gitalk.owner %>',
        admin: '<%= theme.gitalk.adminUser %>',
        id: <%= theme.gitalk.ID %>,
        labels: '<%= theme.gitalk.labels %>'.split(',').filter(l => l),
        perPage: <%= theme.gitalk.perPage %>,
        pagerDirection: '<%= theme.gitalk.pagerDirection %>',
        createIssueManually: <%= theme.gitalk.createIssueManually %>,
        distractionFreeMode: <%= theme.gitalk.distractionFreeMode %>
      })
      gitalk.render('gitalk-container')
</script>

修改comment.ejs文件

文件路径：mellow\layout\_partial\post\comment.ejs，这里直接替换gitment为gitalk即可(反正Gitment也不要了)

comment.ejs
1
2
3
4
5
6
7
8
<% if (theme.valine.enable) { %>
    <%- partial('../_plugins/valine') %>
<% } %>

<% if (!theme.valine.enable && theme.gitalk.enable) { %>
    <div id="gitalk-container"></div>
    <%- partial('../_plugins/gitalk') %>
<% } %>

添加配置

修改主题下的_config.yml配置文件，新增gitalk配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# gitalk评论系统
gitalk:
  enable: true
  ClientID: xxxxx #Client ID
  ClientSecret: xxxxxxxxxx 
  repo: blog #你要存放的项目名，
  owner: YuanLiChenAi #这个项目名的拥有者（GitHub账号或组织）
  adminUser: ['YuanLiChenAi'] #管理员用户
  ID: location.pathname #页面ID，即文章的url，作为唯一性标识。因github限制labels长度为50个字符，故不建议设置中文路径。
  labels: ['Gitalk'] #GitHub issues的标签
  perPage: 15 #每页多少个评论
  pagerDirection: last #排序方式是从旧到新（first），还是从新到旧（last）
  createIssueManually: true #是否自动创建isssue，自动创建需要当前登录的用户为adminuser
  distractionFreeMode: false #是否启用快捷键(cmd|ctrl + enter) 提交评论




hexo服务器搭建

2020/01/29更新
github访问速度太慢，最近购买了阿里云的服务器，于是尝试将博客部署到阿里云上。

nginx配置

下载

下载nginx
1
yum install -y nginx
启动nginx服务，我的系统版本为CentOS7.2，所以命令是systemctl
1
2
systemctl start nginx
systemctl enable nginx

配置

修改nginx配置文件中的server部分
配置文件路径：/etc/nginx/nginx.conf

nginx.conf
1
2
3
4
5
6
server {
    listen       80 default_server; # 监听端口，默认即可
    listen       [::]:80 default_server;
    server_name  www.xxx.cn; #你的网站域名，如果没有可以先写服务器的IP地址
    root         /usr/share/www/website; #这里是你的网站根目录
}
重启nginx服务
1
systemctl restart nginx

网站根目录

在home下创建网站根目录
1
2
3
mkdir www
cd www
mkdir website
配置网站目录权限
1
2
chmod 755 /usr/share/www/website/  #修改权限为755
chown -R git:git website/     #将目录用户和用户组修改为git

在该目录下创建文件index.html,内容如下，成功访问则nginx配置正常。
注意阿里云的服务器需要配置安全组策略，允许80端口访问服务器

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8">
  </head>
  <body>
    <p>Nginx running</p>
  </body>
</html>

创建git用户

创建git用户
1
2
useradd git #创建git用户
passwd git  #设置口令

配置密钥

1
2
3
4
su - git #切换到git进行操作
mkdir .ssh 
cd .ssh
vim authorized_keys

公钥一般在用户文件夹下C:\Users\用户名\.ssh，复制id_rsa中的内容到authorized_keys
如果没有则用ssh-keygen.exe命令创建

设置权限
1
2
chmod 700 .ssh
chmod 600 .ssh/authorized_keys

如果服务器允许通过密钥进行登录的话，可以登录git账户进行测试

git设置

安装nodejs和git

1
2
3
curl -sL https://rpm.nodesource.com/setup_12.x | bash -
yum install -y nodejs
yum install -y git
查看版本，确保安装成功
1
2
3
4
5
6
[root@iZbp1hb2inepg3yt5dswr8Z www]# node -v
v12.14.1
[root@iZbp1hb2inepg3yt5dswr8Z www]# npm -v
6.13.4
[root@iZbp1hb2inepg3yt5dswr8Z www]# git --version
git version 1.8.3.1

git仓库

这里最好使用git账户进行操作，使用root需要设置文件所有用户及用户组
在git用户家目录创建blog.git

1
2
git init --bare blog.git
vim ~/blog.git/hooks/post-receive

添加如下内容，work-tree是网站根目录的文件路径，git-dir是

post-receive
1
git --work-tree=/usr/share/www/website --git-dir=/home/git/blog.git checkout -f
保存退出并授予该文件可执行权限
1
chmod +x ~/blog.git/hooks/post-receive

配置__config.yml

1
2
3
4
deploy:
type: git
repo: git@IP地址:/home/git/blog.git       
branch: master

其他设置

禁止git用户登录

1
2
3
vim /etc/passwd 
/bin/bash # 将git用户的/bin/bash替换为下面字符串
/usr/bin/git-shell