手把手,静态博客搭起来!!从未这么细过(GitHub Pages
很多人第一篇博客都是写自己的搭建心得,我也不例外,毕竟刚刚搭好的博客,空荡荡的,总想写些东西出来让它充实一点,但是一时半会又不知道该写什么好,于是就想把自己搭建的流程和遇到的坑都写出来以供参考。既然决定要写就会用心写,我会尽可能写得详细,让每个人都能轻易搭起来。
介绍
-
GitHub Pages
这是官方的解释,其实它原本是用来展示自己 GitHub 项目的首页,托管在 GitHub 上,但是我们可以在上面编写任何我们想写的内容。
步骤总览
- 申请一个 GitHub 账号,并且创建一个名字为
name.github.io
的项目(GitHub Pages)。 - 安装 Hexo 工具,并绑定 GitHub Pages
- 购买个人域名,并绑定 GitHub Pages
接下来就说下具体的步骤
1. 创建 GitHub Pages
首先登录 GitHub (应该都有账号吧,没有的话也没关系,注册很简单,这里就不介绍了)
点击New repository
新建一个项目。
输入项目名称name.github.io
,记得把name
改成
「GitHub 的用户名」,也就是跟前面「Owner」名称一样就行了,因为我已经创建过这个项目,所以那里有个警告,输入完后点Create repository
就可以了。
现在 GitHub Pages 已经建好了,但是里头是空空如也,可以打开浏览器输入 name.github.io (同样把 name 替换),会有惊喜噢。
2. 安装 Hexo
前提
- Git
- Node.js
「Hexo」运作依赖于这两个工具,已经安装的可以跳过直接看「安装 Hexo」。
安装 Git
「Git」是一款版本控制工具,一般都有装吧,没有的话可以去 Git官网 选择对应的系统下载安装,步骤比较简单。
安装 Node.js
这是维基百科的描述,「Node.js 是一个开放源代码、跨平台的、可用于服务器端和网络应用的运行环境。」
-
Mac 用户
由于 Node.js 更新频繁,建议使用 nvm 安装,方便更新。
打开「终端」执行命令,安装「nvm」。
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
安装完后,重启终端,再安装「Node.js」。
nvm install stable
-
Windows 用户
官方建议直接下载安装程序进行安装 下载。(暂时没试过)
安装 Hexo
一切准备就绪后,可以执行命令安装「Hexo」。
npm install -g hexo-cli
建站
安装好后,就要建站了。建站会生成一个文件夹,里面存放配置信息、资源、主题等文件,一般执行 「hexo
命令」都需要到这个文件夹里执行。
首先打开「命令行」,通过cd
命令定位到你想建站的位置,执行下面命令。
hexo init folder
cd folder
npm install
其中folder
为自定义的文件夹名,我自己定义的名字是hexo
。
本地测试
接下来我们就可以在本地部署起来,测试一下。
由于 Hexo 3.0 把服务器独立成单个模块,所以必须先安装「hexo-server」才能使用。
npm install hexo-server --save
安装完成后执行
hexo s
上面命令是hexo server
命令的缩写。代码在本地部署后,可以通过localhost:4000
访问,打开浏览器看看吧!虽然只是在本地部署,但是看到网页依然满满的成就感啊,默认的主题也不错,当然,如果想换主题的话,可以到「Hexo」官网找,有详细的配置说明。
绑定 GitHub Pages
这时候可以打开name.github.io
看看,没错,还是原样。现在我们就开始部署到「Github」上面去。
使用「git」部署,要先安装「hexo-deployer-git」。
npm install hexo-deployer-git --save
安装完后,用文本编辑器打开/hexo/_config.yml
,拉到最底下,找到# Deployment
,修改部署配置参数,把原本的 deploy、type 删除,增加下面代码。
deploy:
type: git
repo: https://github.com/name/name.github.io.git
branch: master
「repo」对应的是「GitHub Pages」项目的「URL」,这里只要把name
改成对应的「GitHub 用户名」就可以了,例如
repo: https://github.com/yangsimin/yangsimin.github.io.git
切记「:」后面「要有」空格,不然会出错,别问我为什么知道,都是泪。
部署
好了,接下来可以部署了,很简单,执行这三行命令。
hexo clean
hexo g
hexo d
hexo clean
:清理缓存,特别是换个主题后,如果不清理可能会出现主题没有变化的情况。
hexo g
:hexo generate
命令的简写,生成静态文件。
hexo d
:hexo deploy
命令的简写,把静态文件部署到「GitHub」上。
第2、3条命令其实可以合并成一条执行,hexo d -g
或者hexo g -d
,效果都一样的,接着就可以到「GitHub Pages」上看看变化啦,可能会有一些延迟。
写作
好了,博客搭起来后,就可以开始写文章了。
hexo new title
「title」是文章的标题,也是文件的名称,执行了上面的代码后,会在hexo/source/_posts/
里头生成一个「title.md」文件,接着就可以用 Markdown 编辑器打开来写文章啦。我自己用的编辑器是「Typora」,是「stormzhang」推荐的,界面干净简洁,用得挺舒服的。
写完后可以先在本地部署起来,预览效果,觉得不错再部署到「GitHub」上。
Hexo 就简单介绍就到这了,更多详细的内容可以查看 官方文档 。
3. 域名绑定
购买域名
可以到 GoDaddy 或者 万网,我选的「万网」,具体的购买过程就不说啦。
说实话,我的域名想了蛮久的,毕竟是名片般得存在,我觉得域名应该满足两个条件
- 简单好记
- 有自己的信仰或者个性在里面
而我的域名之所以取「simonyang777.com」,原因有四个
- simonyang是我的笔名,可是simonyang.com 被人取了,而且报价一万多块
- 不知道从什么时候起,我很喜欢「7」这个数字,重要的事情说三遍「777」
- 玩水果盘的时候摇到「777」会得大奖,我觉得这也是幸运的象征
- 文件的权限设置成「777」的时候,将开启最高权限,我觉得这是不受约束的象征
绑定域名
接着,需要拿到「GitHub Pages」的「IP」,可以打开命令行ping
一下。
ping name.github.io
我的 IP 是 151.101.100.133
然后回到「万网」,进入控制台
选择「域名」
选择「解析」
选择「修改」
把刚刚得到的「IP」填到「记录值」里头去
最后,也是最关键的一步,回到hexo/source/
文件夹,新建一个名为「CNAME」的文件,注意,没有后缀名的,然后在编辑文件,写下你的域名。没有这一步,网页会显示「404」错误。
然后执行hexo d -g
部署到「GitHub」上去。
最后在浏览器里输入你的域名,如果成功显示了「GitHub Pages」,那么恭喜你,你的博客搭建终于完成!