使用框架Hexo在Github上搭建个人博客
Hexo+Github [Mac环境]假如你有一个Github帐号,我们就可以开始了,如果没有,就去注册好了。想想不是很难的事吧,一个邮箱就行了,别的都不需要。
1. 配置远程和本地Github
1.1 在 Github 上创建一个仓库(Repo)
登陆Github网址,用你的账号登陆进去,点右上角的+
,弹出菜单选择New repository
,在弹出的Repository name
下面的文本框内按照yourname.github.io
这种格式输入,然后选中
Public
, 最后点击绿色的Create repository
创建成功。
重新登陆,点右上角你的头像,在弹出的菜单中选中Your profile
,会发现“youname.github.io”分支创建成功,点击进去,在右边找到Settings
,在左侧栏最下面找到Deploy keys
,点击Add deploy key
,输入你的”key”,密匙的求解过程请参见Git密匙,至此远程仓库部分已经配置完成。
如果你对git很感兴趣,或者,对git的命令行方式很头疼的,可以阅读此物: Git入门教材
⚠️我的git仓库名字为zhaodongchun.github.io,用你自己的名字好了.
1.2 确认本地已经安装好 git 和 npm
在终端输入下面两条命令,确认已经安装好git和npm,如果电脑还没装这两个东西的,请参照官方文档安装:Git入门教材+npm中文文档
git --version npm --version
2. 配置Hexo
1) 安装 hexo
先通读官方文档hexo自动部署网站,不需要看内容,快速翻一遍知道有这个工具在这里就可以了,以后需要时再调用它。然后终端输入以下命令
git --version npm --version
2) 创建本地工作目录
先登陆到github,点击你的分支yourname.github.io
,在右边有个绿色的按钮Clone or download
,点开后点击copy to clipboard
把自己的git地址拷贝出来,在终端cd到你希望把站点放置的位置,下面我cd到Desktop了
cd ~/Desktop git clone https://github.com/zhaodongchun/zhaodongchun.github.io.git
3)初始化你的本地站点
hexo init yourname.github.io cd yourname.github.io npm install hexo-deployer-git --save hexo generate hexo server
在终端打完以上命令后,如果最后显示Database saved
,代表本地站点已经初始化完成,可以终端里按住ctrl的同时点击http://localhost:4000/
查看你的站点了,需要注意的是这个效果是hexo默认模版landscape的效果,我们看看怎么更换模版为Next模版。
4)设置个人模版
这里涉及两个东西,一个是Hexo,一个是Next,我们先到Hexo模版,先看看都有哪些模版可供我们选择,如果你点击模版下面的大标题名字后会进入到github的源文件地址,和创建本地工作目录一样,可以把它的Git地址拷贝出来。先以next模版为例,先定位到Hexo站点目录下,在终端输入以下命令安装
cd your-hexo-site git clone https://github.com/iissnan/hexo-theme-next themes/next
安装完成后,修改配置文件_config.yml
中的 theme
字段为 next
后保存,至此我们完成了站点配置。在终端继续输入以下命令完成模版调试,如果再此出现Database saved
,代表本地站点已经初始化完成,可以终端里按住ctrl的同时点击http://localhost:4000/
查看你的站点了
hexo server --debug
5) 使用Atom码文章
先把Atom下载下来,官网直接下载安装或在终端输入下面命令也可以,如果对Atom还不熟悉没关系,先从官方文档开始逐渐建立Atom语法吧,在线阅读:飞行手册
给 Atom 安装一个命令行面板,Atom 里同时按command+,
调出setting
面板,定位到install
选项,在文本框中搜索platformio-ide-terminal
后点击install
安装atom包,安装完成后按command+shift+t
在下面会出现一个终端,这个包的作用就是解决总是来回切换atom和终端的问题。
完成上面的操作后,我们对包大概有了个概念,下面继续安装一个markdown
包,点击Atom菜单下的Preference的左侧倒数第二项+ install
,输入markdown
,依次安装几个包
- markdown-scroll-sync
- linter-markdown
- markdown-writer
- markdown-toc
- markdown-pdf
- markdown-preview
然后就是随便折腾一会,看看这几个都实现什么功能,接下来用markdown书写文章的过程中会经常使用这几个包
/Desktop/zhaodongchun.github.io/zhaodongchun.github.io
,这是我的目前位置,在mac终端输入ls查看你是否在根路径下,然后终端输入atom .
在atom中打开所有文件,然后使用快捷键command+shift+t打开atom终端,mac的终端就可以关闭了,在左侧栏定位到source
文件夹下的_posts
文件夹,展开后有一个hello-world.md
文件,这个文件就是网站上看到的源文件。
熟悉以下几个快捷键以后会很方便
- command+w 关闭当前标签
- command+shift+m 终端
- ctrl+shift+m 预览
- “>” 块引用
- “-” 任务列表
- “0.” 有序列表
再回去翻翻Next模版,设置下站点配置文件
和主题配置文件
,设置语言和昵称,基本上博客就可以了,保存后在终端输入下面调试命令,如果再此出现Database saved
,代表本地站点已经初始化完成,可以在浏览器输入http://localhost:4000/
查看你的站点了。
hexo server --debug
3. 部署到 Github 上
把本地文件上传到github远程前,我们需要告诉atom上传到的路径,先登陆github,进入zhaodongchun.github.io
这个分支,点击绿色的clone or download
按钮拷贝出来路径,再进入atom,左侧根目录会有一个_config.yml
文件,下面我们设置下这个配置文件,先把拷贝出来的路径粘贴到url后面,注意截止到/
,将root后面改成你的github上的仓库一样,repo后面的直接把你拷贝出来的粘贴就行了,注意:
后面的空格不要少,这样atom就知道上传给谁了。
- url: https://github.com/konglongyinger/zhaodongchun.github.io/
- root: /zhaodongchun.github.io
- deploy:
- type: git
- repo: https://github.com/konglongyinger/zhaodongchun.github.io.git
修改完成后保存,在atom终端输入下面命令,在github上查看上传结果,如果发现文件已经显示,就可以进入github你的分支下的settings,往下翻找到GitHub Pages
这里,将source
下的None
改为master branch
,点击保存后,会出现绿色的一条提示Your site is published at https://konglongyinger.github.io/zhaodongchun.github.io/
,后面链接就是你的网址了,现在你可以点击看看效果。
hexo deploy
4. 调试网站
- 如果每次在本地修改文章,可以用下面命令调试预览
hexo s --debug
- 如果改动了配置文件,在上传到github前最好使用清理命令,清除public目录
hexo clean
- 如果完成阶段性任务了可以用下面命令上传到github
hexo deploy
5. 域名绑定
首先你的有个域名,举例来说我是从百度买的,有了域名后再分三步走。
1) 配置CNAME
在hexo文件夹下的source中新建一个文本文档, 里边输入刚才我们买到的域名的二级域名。举例来说,我申请的是zhaodongchun.com
,就填写zhaodongchun.com
,然后保存为CNAME
.注意大写的CNAME.
2) 配置解析服务器
接下来进域名服务商的后台进行域名解析设置,添加CNAME
记录类型,解析线路默认
就好了,记录值为zhaodongchun.github.io
,配置好后我们本地重新上传到github。
3) 配置站点设置文件重定向
还记得我们没有绑定域名之前设置的配置文件吗,绑定域名后需要重新设置下url
和root
,否则css有可能会丢失,将其设置回默认,如下设置:
- url: https://zhaodongchun.com
- root: /
4)好,到此为止,重新执行下面命令将文件上传到github,浏览器输入你的域名就可以正常登陆了。
hexo clean hexo g hexo d