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

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

介绍

  • GitHub Pages

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

  • Hexo
    这是一个快速、简洁且高效的博客框架。使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页—— By Hexo

步骤总览

  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

前提

  • 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 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」,那么恭喜你,你的博客搭建终于完成!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,383评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,522评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,852评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,621评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,741评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,929评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,076评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,803评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,265评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,582评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,716评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,395评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,039评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,027评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,488评论 2 361
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,612评论 2 350

推荐阅读更多精彩内容