Github-Nginx-个人域名-Hexo静态页面博客部署
之前有试过使用wordpress作为自己的博客系统使用, 无奈学生机性能太差, 带一个wordpress和msyql实在是有点捉襟见肘, 而且在一台不知道自己是否还有兴趣续费的机器上写博客(而且不太容易迁徙,相对), 没啥安全感. 那么诸如hexo jekyll之类的静态博客是一个不错的选择, 由于使用的是markdown作为书写博客的语法,可以在本地备份, 跟换博客系统也只要重新渲染.
使用GithubPage也可以避免那天阿里的服务器不打算续了或想换运营商. 但GithubPage给我域名我不想用同时我又希望自己的域名可以指向自己的阿里云服务器(懒得背IP, 平常使用ssh都是用域名访问的), 故打算使用万能的nginx给GitHubPage做个反代(nginx永远的神).
本人不写前端, 有啥说的不对的轻喷.
搭建环境与准备
- github 账号一个
- 域名一个(非必要)
- centos7.3(其实啥平台都可以)
Hexo 搭建
安装node js
- 下载安装包. 官网下一个你喜欢的版本就成, 我选择的是v12.19.0
- 安装. windows的话可以下msi的,一路next就成, linux平台可以自己编译, 也可以直接选择编译好的二进制文件, 然后把可执行目录的文件添加到环境变量中就成, centos7 的在/etc/profile 下添加如下内容即可
("/usr/local/node-v12.19.0-linux-x64"为我的nodejs安装路径, 不同发行版的环境变量添加方式用, 此处不一一赘述)# nodejs env export NODEJS=/usr/local/node-v12.19.0-linux-x64 export PATH=$PATH:$NODEJS/bin
安装cnpm
npm是nodejs的包管理器(就像python pip一样), 如果不适用代理的话有些包下不动, 可以使用淘宝的cnpm(国内源代替), 安装过程不描述, 直接看cnpm的官网
安装Hexo
cnpm install hexo-cli -g # 头铁的可以用下npm
hexo init blog # blog 为自己博客的项目目录
cd blog
cnpm install
hexo clean
hexo g # 生成静态页,虽然此时啥也没有
hexo s # 在本地的4000端口开启一个服务(注意该服务不是让你用来部署的, 只是临时查看博客渲染效果的)
此时你访问本地的4000端口, 可以看到hexo的初始页面.
安装完成(主题啥的自己折腾)
使用你的GitHubPage
- 在github上建一个仓库(repositories), 名称使用 你的github名称.github.io (像我就是oscarwith2960.github.io, oscarwith2960为我的github用户名)
- hexo 配置你的仓库, 修改你博客项目根目录下的_config.yml文件, 直接到最末尾新增如下内容
deploy: type: git repo: ********** # 此处填写你仓库地址,建议使用ss, http的话每次部署都要输入账号密码很麻烦 branch: master - 提交. 运行如下命令, 吧渲染好的静态页提交到你的GitHubPage上.
hexo g -d - 试着访问下你的GitHubPage
https://<你的github名称>.github.io.
nginx 反代
到了这一步你不做也行, 你的hexo已经搭建完成了, 可以开始写博客了. 如果你和我有相同的顾虑可以参考下我的方案.
- 在你的云服务器上安装nginx(略过, 不会吧, 不会吧, 真的还有人不会装nginx吗), 注意, 不要忘记了开ssl模块(没开的回去重编)
- 80端口配置(https跳转)
server_name填写你的域名
server {
listen 80;
server_name www.xyzka.com;
rewrite ^(.*)$ https://${server_name}$1 permanent;
}
- 443端口反向代理配置
此处有一处需要说明下, 如果proxy_pass直接填写你的GitHubPage地址会导致访问404, 此处需要填写你ping GitHubPage地址得到的IP, Host中填写你的域名(与后续你指定的CNAME中一样就行,也不一定要你的域名).
server {
listen 443 ssl;
listen [::]:443 ssl;
server_name blog;
charset utf-8;
ssl_certificate /usr/local/nginx/cert/www.xyzka.com/4652757_www.xyzka.com.pem;
ssl_certificate_key /usr/local/nginx/cert/www.xyzka.com/4652757_www.xyzka.com.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
proxy_pass https://185.199.108.153;
proxy_redirect off;
proxy_set_header Host xyzka.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
-
解决提交更新后Custom domain的失效问题
在你的博客目录下的source目录下添加CNAME文件, 文件中填写你的Custom domain值(就是填你的域名, 与配置文件中"proxy_set_header Host"一致就行). 重新渲染提交``hexo g -d``` -
重启你的nginx
域名解析
跑去你买域名的地方,解析到你安装nginx的服务器. 如果不用nginx做反代也可直接解析到你的GitHubPage.
