1. 为何采用Github pages
服务
Hexo
是一个简单、快速、强大的基于 Github Pages
的博客发布工具,支持Markdown
格式,有众多优秀插件和主题。
使用github pages
服务搭建博客的好处有:
(1)全是静态文件,访问速度快;
(2)免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台;
(3)可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于
github
的;(4)数据绝对安全,基于
github
的版本管理,想恢复到哪个历史版本都行;(5)博客内容可以轻松打包、转移、发布到其它平台;
2. 准备工作
在开始一切之前,首先要准备以下工作:
Github
账号,https://github.com/
node.js
、npm
,http://nodejs.cn/download/
git for windows
(或者其他git
客户端),https://git-scm.com/downloads
3. 搭建博客
3.1 创建仓库
(1)直接打开Github
官网,完成注册
(2) 创建仓库:新建一个名为github用户名.github.io
的仓库,比如,github
用户名为lajos182
,那么就新建lajos182.github.io
的仓库(其他名称无效),以后部署上线就可以使用http://lajos182.github.io
(如果使用https
,就使用https://lajos182.github.io
)访问
3.2 绑定域名
如果不绑定域名就用默认的 xxx.github.io
来访问,如果你想拥有一个属于自己的域名,那也是OK的;
首先注册一个域名,域名注册可以去godaddy
,阿里云、腾讯云等;
绑定域名分2种情况:带www
和不带www
的;
域名配置最常见有2种方式,CNAME
和A
记录,CNAME
填写域名,A
记录填写IP
,由于不带www
方式只能采用A
记录,所以必须先ping
一下github用户名.github.io
的IP
,然后到你的域名DNS
设置页,将A
记录指向你ping
出来的IP
,将CNAME
指向github用户名.github.io
,这样可以保证无论是否添加www
都可以访问,如下:
然后到你的github
项目根目录新建一个名为CNAME
的文件(无后缀),里面填写解析后的域名。注意,在绑定了新域名之后,原来的github用户名.github.io
并没有失效,而是会自动跳转到你的新域名。
3.3 配置SSH key
提交代码肯定要拥有github
权限才可以,但是直接使用用户名和密码太不安全了,所以使用ssh key
来解决本地和服务器的连接问题。
用git bash
执行如下命令:
1 | $ cd ~/. ssh #检查本机已存在的ssh密钥 |
如果提示:No such file or directory
,就使用下面的命令生成密钥:
1 | $ ssh-keygen -t rsa -C "邮件地址" |
然后连续3次回车,最终会在用户目录下生成一个.ssh
目录,找到.ssh\id_rsa.pub
文件,记事本打开并复制里面的内容,打开github
主页,进入个人设置 ->SSH and GPG keys
-> New SSH key
,配置好密钥即可。
3.4 hexo
安装并初始化
(1)安装hexo
:首先确保电脑已经安装node.js
和npm
,可以通过下面的命令进行验证是否已经安装:
1 | $ node -v |
如果直接显示出对应的版本号表示已经安装,当然还要确保电脑已经配置好环境变量。然后输入命令安装hexo
:
1 | $ npm install -g hexo |
(2)克隆仓库至本地:如果无法克隆空仓库,可以现在仓库新建一个README.md
文件,里面可以暂时写一些介绍。
1 | $ git clone git@github.com:lajos182/lajos182.github.io.git # 后面是创建的仓库地址 |
(3)找到lajos182.github.io
所在目录,创建一个hexo
(可以随便取个名字)分支,这是方便以后多台电脑同步。
1 | $ cd lajos182.github.io/ |
(4)切换至hexo
分支,初始化:
1 | $ hexo init |
hexo
会自动下载一些文件至lajos182.github.io
目录,包含node_modules
,此时创建一个.gitignore
文件,里面包含以下内容:
1 | .DS_Store |
此时的目录结构如下:
这时,使用下面的命令启动服务后,在浏览器访问 http://localhost:4000
即可看到内容,可能会碰到浏览器一直在转圈但是就是加载不出来的问题,一般情况下是因为端口4000被占用的缘故,解决端口冲突问题请参考这篇文章:http://blog.liuxianan.com/windows-port-bind.html
。
1 | $ hexo g # 生成 |
3.5 hexo
修改主题
第一次初始化的时候hexo
已经帮我们写了一篇名为 Hello World
的文章,默认的主题比较丑,所以可以进行修改。hexo
常用的主题可以看知乎这个推荐https://www.zhihu.com/question/24422335/answers/updated
。
博主采用hexo-theme-yilia-plus
这个主题,这个主题是根据hexo-theme-yilia
主题做了一些优化和改动,详情可以直接点击上面的链接查看。
预览效果:
电脑端:
移动端:
(1)下载主题:
1 | $ cd lajos182.github.io/ |
下载后的主题都在目录themes
下:
(2)修改全局配置_config.yml
:就是根目录下的这个文件,下面配置中的xxxxxx
可以根据自己来进行配置。
1 | # Hexo Configuration |
(3)修改主题下面的_config.yml
:这个配置是themes/yilia-plus/_config.yml
1 | # Header-菜单 |
(4)添加CNAME
文件:文件内容添加绑定的域名
(5)将上面显示的目录结构中的文件、CNAME
、READE.md
提交至远程hexo
分支:
1 | $ git add . |
(6)hexo
常见命令
1 | hexo new "postName" #新建文章 |
缩写:
1 | hexo n == hexo new |
组合命令:
1 | hexo s -g #生成并本地预览 |
(7)发布博客并上传
1 | hexo n "发布第一个博客" |
进入lajos182.github.io/source/_posts/
,找到发布第一个博客.md
这个文件,可采用Markdown
编辑器进行编写,编写完成后,使用命令生成并上传
(8)提交hexo
分支的修改内容:
每次发布完,记得将修改的部分提交至hexo
。
3.6 git
管理与多端同步
为什么会存在这个问题呢?因为刚开始在一台电脑上搭建hexo
环境并发布博客后,又换用另外一台新设备继续发布博客,此时发现从github
克隆下来的只有网页样式文件,而source
目录中的md
文件就没有,如果直接发布新博文,就会把原来的博文覆盖掉。
为解决这个问题,上面的教程已经实现了:通过git
建立新建一个hexo
分支,hexo
生成的静态博客文件默认放在master
分支上;hexo
的源文件(部署环境文件)可以都放在hexo
分支上,换用新设备时,直接git clone -b hexo git@github.com:lajos182/lajos182.github.io.git
,然后使用npm install
安装环境,这样就能看到之前发布的博文*.md
文件,发布新博文还是一样的。
3.7 常见的问题
(1)域名如何使用https
访问?
进入github
官网,打开仓库所在目录,点击settings
,在Gighub Pages
服务中配置Enforce HTTPS
,此时绑定的域名就可以使用https
访问
(2)如何添加gitment
评论系统?
进入github
主页,打开Settings
—>Developer settings
—>OAuth Apps
—>New OAuth App
,进入下面的页面:详细可以参考https://www.jianshu.com/p/f5c4633524c7
(3)hexo
的gitment
评论跳转问题,登录github
后出现跳转地址https://www.lajos.top/?error=redirect_uri_mismatch&error_description=The redirect_uri MUST match the registered callback URL for this application.&error_uri=https://developer.github.com/apps/managing-oauth-apps/troubleshooting-authorization-request-errors/#redirect-uri-mismatch
,而且还无法评论
这个问题一般是注册的gitment
应用有问题,自己查看主页以及授权回调地址是否正确,http
和https
也要查看是否与博客的域名地址一致。
(4)上一页和下一页显示问题:使用这个主题可能会出现下面这个问题:
首先找到lajos182.github.io/themes/yilia-plus/layout/_partial/archive.ejs
,修改两处,分别在8,9行与37,38行,将« Prev
改为<< 上一页
, Next &raque;
改为下一页 >>
,操作如下:
接着,找到lajos182.github.io/themes/yilia-plus/layout/_partial/script.ejs
,crtl + f
搜索« Prev
,将改为<< 上一页
, 搜索Next &raque;
改为下一页 >>
,操作如下:
保存完成,输入一下命令:
1 | $ hexo clean |
至此完成修改
4 本文参考
http://blog.haoji.me/build-blog-website-by-hexo-github.html?from=xa
https://blog.csdn.net/whbk101/article/details/97300209
https://www.jianshu.com/p/f5c4633524c7
- 本文作者: Lajos
- 本文链接: https://www.lajos.top/2020/05/07/hexo-github快速制作个人博客/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!