手把手,静态博客搭起来!!从未这么细过(GitHub Pages

2017-04-04  本文已影响0人  simonyang777

很多人第一篇博客都是写自己的搭建心得,我也不例外,毕竟刚刚搭好的博客,空荡荡的,总想写些东西出来让它充实一点,但是一时半会又不知道该写什么好,于是就想把自己搭建的流程和遇到的坑都写出来以供参考。既然决定要写就会用心写,我会尽可能写得详细,让每个人都能轻易搭起来。

介绍

这是官方的解释,其实它原本是用来展示自己 GitHub 项目的首页,托管在 GitHub 上,但是我们可以在上面编写任何我们想写的内容。

步骤总览

  1. 申请一个 GitHub 账号,并且创建一个名字为name.github.io的项目(GitHub Pages)。
  2. 安装 Hexo 工具,并绑定 GitHub Pages
  3. 购买个人域名,并绑定 GitHub Pages

接下来就说下具体的步骤

1. 创建 GitHub Pages

首先登录 GitHub (应该都有账号吧,没有的话也没关系,注册很简单,这里就不介绍了)

点击New repository新建一个项目。

输入项目名称name.github.io,记得把name改成
「GitHub 的用户名」,也就是跟前面「Owner」名称一样就行了,因为我已经创建过这个项目,所以那里有个警告,输入完后点Create repository就可以了。

现在 GitHub Pages 已经建好了,但是里头是空空如也,可以打开浏览器输入 name.github.io (同样把 name 替换),会有惊喜噢。

2. 安装 Hexo

前提

「Hexo」运作依赖于这两个工具,已经安装的可以跳过直接看「安装 Hexo」。

安装 Git

「Git」是一款版本控制工具,一般都有装吧,没有的话可以去 Git官网 选择对应的系统下载安装,步骤比较简单。

安装 Node.js

这是维基百科的描述,「Node.js 是一个开放源代码、跨平台的、可用于服务器端和网络应用的运行环境。」

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

安装完后,重启终端,再安装「Node.js」。

nvm install stable 

安装 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 ghexo generate命令的简写,生成静态文件。
hexo dhexo 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 或者 万网,我选的「万网」,具体的购买过程就不说啦。

说实话,我的域名想了蛮久的,毕竟是名片般得存在,我觉得域名应该满足两个条件

  1. 简单好记
  1. 有自己的信仰或者个性在里面

而我的域名之所以取「simonyang777.com」,原因有四个

  1. simonyang是我的笔名,可是simonyang.com 被人取了,而且报价一万多块
  1. 不知道从什么时候起,我很喜欢「7」这个数字,重要的事情说三遍「777」
  2. 玩水果盘的时候摇到「777」会得大奖,我觉得这也是幸运的象征
  3. 文件的权限设置成「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」,那么恭喜你,你的博客搭建终于完成!

上一篇下一篇

猜你喜欢

热点阅读