使用框架Hexo在Github上搭建个人博客

leozhao
·
·
IPFS
写于2018年1月26日的一篇文章,域名到期了,等去中心化域名注册好了续上。

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就知道上传给谁了。

修改完成后保存,在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) 配置站点设置文件重定向

还记得我们没有绑定域名之前设置的配置文件吗,绑定域名后需要重新设置下urlroot,否则css有可能会丢失,将其设置回默认,如下设置:

4)好,到此为止,重新执行下面命令将文件上传到github,浏览器输入你的域名就可以正常登陆了。

hexo clean
hexo g
hexo d
CC BY-NC-ND 2.0 授权

喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!