个人 blog 欢迎访问:https://mytechshares.com/ , 内容同步自微信公众号。首先说下为什么自建 blog 站点:

  • 微信公号属于私域流量,搜索引擎无法检索,一般发文后一周就没流量,更别提历史文章
  • 在简书上写过一年,回头发现全都得平台打工了,内容审核极其严格
  • 网上有人洗我的稿,也不标明来源。虽不是什么大 v, 一起洗,大家洗洗更健康

为什么不用 Wordpress 呢?blog 纯粹是静态页面,wp 太重了,各种 mysql 管理后台。

网上很多人用 github pages, 国内访问有点慢,速度是个问题,有同学用 oss 做 cdn 分发效果也不错。同时域名也是 github.io 的,我看有人 cname 过去了,也是可以的

最终方案:hexo + nginx + git, 外加 gitee 实现的图床。本文大致分享下搭建流程,遇到报错可以私信沟通交流,网上也有解决方案

hexo 用于在 Mac 本地渲染 html 静态页面,大家只需要编写 Markdown 文本即可。aliyun ec2 机器上搭建 nginx 服务用于提供 web 443/80 访问,ec2 上搭建 git server (数据目录就是 nginx 目录), 当 hexo 本地渲染完成后,hexo 自动 deploy 同步文件到 ec2 git 上,完成了自动的 CI/CD pipeline. 博客的图片可以放到 ec2 本地目录,也可以用图床,我选择使用 gitee 来节省带宽流量

购买机器域名

Aliyun 服务器 2 cpus 1 G memory, 选择推荐的内蒙古大区。性能突发实例即可,等以后流量高,性能不够再升级

选五年折扣非常大,950 大洋。国内麻烦的就是域名,备案很快,使用 aliyun 一站式备案即可,大概一周完成,线上操作即可

域名五年一共 350 大洋,那么一共五年 1300,成本平摊下来每年就是 260 元。购买服务器还有个好处,可是做其它测试,搭建其它服务

搭建 nginx

使用 ubuntu apt 仓库的 nginx 即可,安装比较简单。注意 root@test-hexo:~# 表示操作 ec2 服务器

1
2
root@test-hexo:~# apt-get  update
root@test-hexo:~# apt install nginx -y

然后查看 nginx 是否安装成功

1
2
3
4
5
6
7
root@test-hexo:~# nginx -v
nginx version: nginx/1.14.0 (Ubuntu)
root@test-hexo:~# ps aux | grep -i nginx
root 1727 0.0 0.1 141128 1552 ? Ss 10:21 0:00 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
www-data 1728 0.0 0.6 143800 6200 ? S 10:21 0:00 nginx: worker process
www-data 1729 0.0 0.6 143800 6200 ? S 10:21 0:00 nginx: worker process
root 2093 0.0 0.1 16156 1148 pts/0 S+ 10:22 0:00 grep --color=auto -i nginx

此时使用公网 ip 网页打开 80 端口,测试能否看到 nginx default html 页面。如果打不开,请检查 aliyun 安全组设置

如上所示,需要设置 80/443 对外开放,默认是不允许访问的。ps 可以看到 nginx worker 线程有两个,用户名是 www-data, 之后我们会修改用户。nginx 默认配置文件是 /etc/nginx/nginx.conf, 新加的站点需要放到 /etc/nginx/sites-enabled/ 目录下面

搭建 git server

在 ec2 上搭建 git 服务,直接 apt 安装即可

1
root@test-hexo:~# apt install git -y

查看 git 版本,添加用户 git 用于搭建 git server

1
2
3
root@test-hexo:~# git version
git version 2.17.1
root@test-hexo:~# adduser git

这里注意 shell 提示符,# 表示当前是 root, $ 表示当前用户是 git. 一定不要混

1
2
3
4
5
root@test-hexo:/home# su - git
git@test-hexo:~$ ls -rlt
total 0
git@test-hexo:~$ git init --bare test-blog.git
Initialized empty Git repository in /home/git/test-blog.git/

创建 test-blog 裸的 git 仓库,目录用于搭建服务

在本地机器上(工作本,不是 ec2)生成 ssh-key, 如果有请忽略

1
ITCN000312-MAC:~ zerun.dong$ ssh-keygen -t rsa

然后将公钥 ~/.ssh/id_rsa.pub 复制到 ec2 git 帐号,使得我们可以无密码同步本地数据到 ec2 git

1
2
3
git@test-hexo:~$ mkdir ~/.ssh
git@test-hexo:~$ touch ~/.ssh/authorized_keys
git@test-hexo:~$ chmod 600 ~/.ssh/authorized_keys

git@test-hexo:~$ 是 ec2 机器,创建 .ssh 目录和文件 authorized_keys, 注意权限是 600, 把上面创建好的 id_rsa.pub 内容复制粘贴到 ec2 的 authorized_keys 文件里

然后在本地测试是否可以无密码登录 git

1
2
3
4
5
6
7
8
9
10
11
12
13
14
ITCN000312-MAC:~ zerun.dong$ ssh git@8.130.172.114
Welcome to Ubuntu 18.04.5 LTS (GNU/Linux 4.15.0-156-generic x86_64)

* Documentation: https://help.ubuntu.com
* Management: https://landscape.canonical.com
* Support: https://ubuntu.com/advantage
New release '20.04.3 LTS' available.
Run 'do-release-upgrade' to upgrade to it.

......

Welcome to Alibaba Cloud Elastic Compute Service !

git@test-hexo:~$

下面来构建 hook, 当 git 仓库有变化时,同步将文件复制到 nginx data 目录

1
2
3
4
5
6
git@test-hexo:~$ touch ~/test-blog.git/hooks/post-receive
git@test-hexo:~$ chmod u+x ~/test-blog.git/hooks/post-receive
git@test-hexo:~$ cat ~/test-blog.git/hooks/post-receive
#!/bin/sh
#!/bin/sh
git --work-tree=/home/git/test-blog-data --git-dir=/home/git/test-blog.git checkout -f

~/test-blog.git/hooks/post-receive 文件内容就一行 shell 命令。将 git push 来的数据放到 /home/git/test-blog-data 目录下面

搭建本地 hexo

1
2
3
4
5
6
:~ zerun.dong$ npm install hexo-cli -g
:~ zerun.dong$ hexo init test-hexo
......
INFO Start blogging with Hexo!
:~ zerun.dong$ cd test-hexo/
:test-hexo zerun.dong$ npm install

以上操作均在 Mac 本地,如果 hexo init 失败,可以 google 搜一下报错,大概率是因为本机 node 版本不对

1
2
3
4
5
6
7
8
9
:~ zerun.dong$ cd test-hexo/
:test-hexo zerun.dong$ hexo g
INFO Generated: css/fonts/fontawesome-webfont.woff
INFO Generated: css/fonts/fontawesome-webfont.svg
INFO 17 files generated in 330 ms
:test-hexo zerun.dong$ hexo server -s
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

进入到 test-hexo 目录下面,运行 hexo g 生成静态页面,运行 hexo server -s 即可测试本地静态 web 服务,打开 http://localhost:4000

看到默认的 hello 页面即可

构建自动化

进到本机 test-hexo 目录下面

1
:test-hexo zerun.dong$ npm install --save hexo-deployer-git

安装 hexo git deploy 插件

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: 'git'
repository:
aliyun: git@8.130.172.114:/home/git/test-blog.git,master

然后我们在 _config.yml 文件末尾添加 git 构建 pipeline, 注意这个 ip 目录 是我测试用的,需要改成你自己的。现在随变编写一个 markdown 测试件文

1
2
3
4
5
6
:test-hexo zerun.dong$ cat source/_posts/hahahahhaha.md
### title1

this is hello world line

#### sub title1

上面是简单的测试 markdown 文件,需要放到 source/_posts 目录下面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
test-hexo zerun.dong$ hexo g -d
INFO Validating config
INFO Start processing
INFO Files loaded in 75 ms
INFO 0 files generated in 21 ms
......
create mode 100644 css/style.css
create mode 100644 fancybox/jquery.fancybox.min.css
create mode 100644 fancybox/jquery.fancybox.min.js
create mode 100644 index.html
create mode 100644 js/jquery-3.4.1.min.js
......
Branch 'master' set up to track remote branch 'master' from 'git@8.130.172.114:/home/git/test-blog.git'.
INFO Deploy done: git

hexo g -d 先是构建静态文件,渲染,然后 git deploy 到我们的 ec2 server 服务上,再触发 post-receive 脚本

1
2
git@test-hexo:~$ ls test-blog-data/
2021 archives css fancybox index.html js

登到 ec2 服务器上,查看 test-blog-data 目录己经有渲染好的静态文件了。但是此时 nginx 是不能用的,原因是 nginx 配置还没有改

1
2
3
4
5
root@test-hexo:~# grep user /etc/nginx/nginx.conf
user www-data;
root@test-hexo:~# grep root /etc/nginx/sites-enabled/default
root /home/git/test-blog-data;
root@test-hexo:~# nginx -s reload

只需修改两处,/etc/nginx/nginx.conf 把 user 变成 git, /etc/nginx/sites-enabled/default 数据目录 root 改成上面提到的 /home/git/test-blog-data, 最后 nginx -s reload 重新加载。打开网站即可测试

关于如何修改网站名称,自定义主题,添加友情链接等等,请网上搜索,非常简单

SSL (optional)

建义都加上 https, 反正 letsencrypt 也是免费的,certbot 可以自动修改我们的 nginx config file, cron 可以自动更新 ssl file 非常方便

1
2
3
4
5
6
listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/mytechshares.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/mytechshares.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

最后 /etc/nginx/sites-enabled/default 修改完的配置如上所示

图床 (optional)

图床是可选的,图片和静态的网页放到一起也可以,但是担心流量太大,ec2 带宽超额计费

整体就是 PicGo 然后将图片上传到 Gitee 上,然后我们只需引用图片连接即可

1
![](/images/dongzerun-weixin-code.png)

rss 添加订阅 (optional)

进入到 test-hexo 目录,然后安装插件

1
2
3
4
5
6
7
8
9
10
11
12
13
npm install hexo-generator-feed
``
```shell
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

主题 (optional)

hexo 官方有很多 theme, 都是开源的,大家看看喜欢哪种,按照流程下载即可

百度统计 (optional)

大家可以添加 baidu/google 统计, 我这里出于方便选择了 baidu, 安装大家可以自行参考 baidu 官网

其实没什么用,不过可以告诉我们你的 blog 没人看~~~

测试检索

我只能说 baidu 是毒瘤

上面两张图分别是 baidu, google 搜索的结果,结论:baidu 没落是有道理的…

小结

以上几个 optional 是可选的,大家自行 google 搜索如何操作,非常简单。写文章不容易,如果对大家有所帮助和启发,请大家帮忙点击在看点赞分享 三连

关于 自建博客 大家有什么看法,欢迎留言一起讨论,大牛多留言 ^_^