财新传媒
位置:博客 > 开智学堂 > 极简四步走:快速搭建极客大牛都在用的独立博客

极简四步走:快速搭建极客大牛都在用的独立博客

极客世界,基本上人人都有一方属于自己的小小天地,他们在这里发布作品、分享思考。甚至于,认识他们的最好方法不是见他们,而是先读他们的博客。这次要介绍的便是:备受极客们喜爱的独立博客搭建方法。

本文将基于 Mac OS 系统为大家介绍如何利用 GitHub+Hexo 搭建一款轻便的独立博客主页,现在就开始吧!

第一步 Hexo 搭建本地静态网页

1.安装 Node.js——配置安装 Hexo 的环境

Node.js 下载地址:

https://link.zhihu.com/?target=https%3A//nodejs.org/en/download/

注意安装 Node.js 会包含环境变量及 npm 的安装。安装后,检测 Node.js 是否安装成功,在命令行中输入 node -v ,回车后出现版本号即安装成功。


$ node -v
v8.11.3

检测 npm 是否安装成功,在命令行中输入 npm -v ,回车后出现版本号即安装成功。


$  npm -v6.2.0

到这里,安装 Hexo 的环境已经全部搭建完成。

2.安装 Hexo——Hexo 是我们的个人博客的本地框架

(1)使用 npm 命令安装 Hexo 客户端,输入:


$ npm install -g hexo-cli

这个安装时间较长耐心等待。

(2)安装完成后需要自行在电脑里创建一个文件夹,可以命名为 myBlog(下文都以该文件夹名进行操作说明),Hexo 框架和发布的网页文件都在这个文件夹中。

(3)由于之后的配置需要在 myBlog 文件夹下进行,需要用 cd 命令打开你刚创建的文件夹 myBlog。
比如:我创建的 myBlog 文件夹位于:local/user/zoe/myBlog,zoe 是我的本机用户名,由于我的终端默认是在 zoe 文件夹下进行操作,所以我只要输入 cd myBlog 进行即可进入 zoe 下的 myBlog 文件夹。


cd myBlog

(4)进入 myBlog 文件夹后初始化博客,输入:


$ hexo init myBlog

(5)检查网站雏形
输入以下命令:hexo g 用于生成 public 静态资源;hexo s 用于启动本地服务器(注:g=generate; s=server)


$ hexo g
$ hexo s

执行上述两条命令后,在浏览器输入 http://localhost:4000 ,即可查看通过 hexo 部署的本地静态网页效果。

到这里,本地网页搭建完成。(文末附有 hexo 的常用命令)

第二步 关联 GitHub 发布网页

为了让更多人看到你的网页,需要通过 GitHub 将你的网页发布到网络上。

1.在 GitHub 上创建一个新仓库

(1)如果没有 GitHub 账号可以去官网注册,注册后创建一个名为 yourname.github.io的新仓库,yourname是你的 GitHub 的用户名,这个规则不能变。

(2)通过 SSH 连接到 GitHub 

( https://help.github.com/articles/connecting-to-github-with-ssh/ )点此链接,查看官方操作说明。添加 ssh keys 之后,就可以使用 git 为后缀的仓库地址,并且本地发布网页时无需输入用户名和密码。

2.关联 Hexo 到 GitHub

打开 myBlog 下的配置文件 _config.yml,拉到文件最后,按下面内容进行修改:


deploy:  type: git
  repo: git@github.com:yourname/yourname.github.io.git
  branch: master

注意:

  • 考虑到大家不止一个 GitHub 账号,“repo”此处如果不这样处理,而去使用 https 的仓库地址的话,接下来部署时往往会出现不让输入 GitHub 用户名和密码的问题!

  • 每个关键字的后面都有个空格

到这里,这样就将 Hexo 关联到了 Github。

3.新建文章并发布

(1)将发布到网页上的文章以 .md 文件形式存储在 myBlog/source/_posts 目录下。.md 文件即 markdown 文件,详细在网上自行查询,非常简洁好用的文本格式。

(2)输入以下命令将本地静态网页发布到网络
hexo d 用于将 public 文件夹的资源推送到仓库上(注:d=deploy)


$ hexo g
$ hexo d

执行上述两条命令后,在浏览器输入 yourname.github.io 即可看见自己的博客页面。
注:hexo clean 用于清除缓存 db.json 和 public 文件,在删改文章后需要先清除缓存。

到这里,你就成功利用 Hexo+GitHub 搭建了你的个人博客并发布了第一篇博文。

第三步和第四步是对页面主题的更改以及关联个性化域名(需要花钱购买),如无需要,可以不用往后看了。

你现在已经可以在网站上发布你的文章,并给你的朋友甩过去博客链接了,试试吧!

第三步 更改博客页面主题

默认的主题不太好看,推荐点赞最高的 next 主题。

1.在博客根目录 myBlog 下执行:


git clone https://github.com/iissnan/hexo-theme-next themes/next

2.执行


cp themes/landscape/source/CNAME themes/next/source

把 CNAME 文件拷贝过来。然后将博客根目录下的 _config.yml 下的 theme 的名称 landscape 修改为 next 即可。

3.执行


$ hexo clean
$ hexo g
$ hexo s

到这里,就可以看到 next 主题效果了!

第四步 绑定个性域名

1.获取域名
福利时刻:GitHub Education 有一个面向学生的教育包,拥有学生邮箱和学生证即可申请注册。申请成功后可以在这个学生包里面找到 NameCheap 网站提供的.me结尾的顶级域名,可以免费使用一年!(如果没有学生邮箱可以直接在 NameCheap 等域名网站购买域名。)

拿到 GitHub 的免费包之后,打开免费包找到 NameCheap 那一项,点击绑定 NameCheap 和申请教育包的 GitHub 账号,之后去 NameCheap 用该邮箱注册然后就可以免费领取你的域名啦!

领取域名过程中,会遇到一个三选一的选项。大致意思是选择将该域名绑定 GitHub Pages 或者“一个图片类型网页”或者是“Ghost 建立的网站”。我当时选择的是 GitHub Pages,这也为后来将域名绑定到我搭建博客的 GitHub 仓库埋下了一个坑。之后细说。

2.解析域名

(1)获取域名后,点击 MANAGE 进行管理,之后点击 Advanced DNS 解析域名到 yourname.github.io。点击 ADD NEW RECORD 添加如下三条记录即可。

如果之前领取域名时选择了绑定 GitHub Pages 那么前两条记录应该都已经有了,添加第三条记录即可。注意将网址换成你的 yourname.github.io

注:192.30.252.153/192.30.252.154 是 GitHub 的服务器地址

(2)登录 GitHub,进入之前创建的仓库,点击 settings,设置 Custom domain,输入你的域名(图中域名为我搭建博客时参考过的博客文章地址)。

:由于之前领取域名时,我选择了将该域名绑定 GitHub Pages,如果你也是这么选择的,此时你的域名已经绑定了一个 GitHub Pages 页面,所以你需要先登录用学生邮箱注册的 GitHub 账号,在仓库中找到一个 CNAME 的文件删除,之后才能进行第二步操作,否则会提示你已经绑定了 GitHub Pages。

(3)进入本地博客文件夹 ,在 myBlog/source 目录下,创建一个记事本文件,输入你的域名。

只要写进你自己的域名即可。如果带有 www,那么以后访问的时候必须带有 www 完整的域名才可以访问,但如果不带有 www,以后访问的时候带不带 www 都可以访问。

建议不要输入带有 www 的域名。

到这里,就完成了绑定域名,去浏览器输入你的域名试试吧!(搭建好了欢迎在文末留下你的博客地址哦!

推荐 1