梳理下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,这里直接替换gitmentgitalk即可(反正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 /home/www/website; #这里是你的网站根目录
}
重启nginx服务
1
systemctl restart nginx

网站根目录

在home下创建网站根目录
1
2
3
mkdir www
cd www
mkdir website
配置网站目录权限
1
2
chmod 755 /home/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=/home/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