年轻人的一个博客,Hexo + GitHub 零基础/零成本搭建教程

最近发现除了公众号和微博之外,还是需要一个地方来总结自己的经验,分享自己的见闻和思考,因为我记性比较差,不写下来就忘了。

而备忘录里不太适合分享,所以打算建个博客。

建博客的时候就涉及到选择博客系统,之前用的 WordPress 感觉太臃肿,阅读体验也不好,Typecho 太小众,插件也少,阅读体验也一般。

于是朋友推荐我试试 Hexo,一个基于 Node.js 开发的博客系统,支持 Markdown,而且阅读体验不错,插件也不少,用了下感觉不错,而且门槛也不高,因此写了本文给大家分享下零基础,零成本搭建这个博客系统的方法,也作为我博客的一篇文章吧。

推荐你在我的博客阅读这篇教程,一边体验,一边搭建:https://sunbelife.com

前言

阅读约定

为了排版美观,减少理解错误,提高阅读效率,本文采用了一些自定的撰写规则。

请务必在阅读下文前在这里阅读本文章的 -> 阅读指南

文章背景

本教程基于 macOS 10.14 运行,hexo: 3.7.1,npm 5.6.0,如你与我的版本号不同,可能需要稍作调整或在底下留言更正。

定义区

  • 仓库 = 对应 GitHub 中的 Repositories
  • github_io_link = 你 GitHub 的账号.github.io
  • github_project_link = 你建立的 Repositories 链接,打开 Repositories 之后,复制网址栏或在 Clone or Download 处即可获得

教程正文

事先准备

注册一个 GitHub 账号,并新建一个以 github_io_link 1 命名的 GitHub 仓库 2

  1. 打开 GitHub 官网 ,输入用户名、密码、邮箱,并点击 Sign Up for GitHub.

    注:密码请同时包含大小写字母与数字。

  1. 在接下来页面中选择 Free Plan 即可,点击下一步。
  1. 最后一个页面中直接跑到最下面选择 skip this step 即可。
  1. 然后去你的邮箱点击验证邮件的链接。
  1. 点击之后会自动再次打开 GitHub,点击左下角的 New Repositories,新建一个仓库 2
  1. 在名称位置输入你的 github_io_link 1,并点击底部的 Create repository.
  1. 在接下来的页面中点击 Glone or Download,获取 github_project_link 3 备用。

在本地安装 Hexo

我们平时在使用 Hexo 时,是先在本地编辑好文档或修改完博客的样式后,再部署到 GitHub 服务器的,所以接下来我们需要做的就是在本地搭建好 Hexo 的服务,并建立一个储存网站内容的文件夹,为了举例方便,我们这里会把这个文件夹建立在桌面,跟着以下步骤走即可。

  1. 打开终端,进入桌面目录:

    1
    cd ~/Desktop
  2. 接着为电脑安装 Hexo:

    1
    2
    sudo npm i -g hexo-cli -save
    sudo npm install --save hexo-deployer-git

    请单行分两次输入,出现提示时输入密码即可。

  3. 安装完毕后,即可在桌面建立 Hexo 的文件夹了,我们这里把它命名为 my_blog:

    1
    hexo init my_blog
  4. 进入该目录:

    1
    cd my_blog
  5. 至此,Hexo 已经部署完毕,我们就可以在本地跑起来这个网页了,输入:

    1
    2
    hexo g
    hexo s
  6. 打开浏览器,输入 localhost:4000,即可看到博客已经可以成功在本地访问了:

  1. 如果你访问不到这个页面,请检查上面是不是哪一步出错了,如果能成功访问,恭喜你已经完成了一大半,接下来的工作就是把它放到 GitHub 的服务器,让所有人都能通过链接随时访问你的博客。

  2. 访问之后记得在终端关闭掉本地服务器,激活终端窗口,并在键盘按下 Ctrl + C 键即可。

部署至 GitHub

  1. 进入刚刚建立的 Hexo 文件夹,即 my_blog 的路径:

    1
    cd ~/Desktop/my_blog
  2. 修改配置文件,将 Hexo 关联至你的 GitHub 仓库 2

    1
    nano _config.yml
  3. 将光标移动到最尾端(用鼠标滚轮即可),找到 Deployer 字样,进行如下修改:

    1. 在 type 后写入 git。
    2. 增加 repo: github_io_link 1

    注:每个冒号后请加入一个空格,不然会出现错误。

  1. 按下 Ctrl + O、Ctrl + X 保存并退出。

  2. 接着就可以部署到 GitHub 了,以后每次部署都需要输入以下命令,依次清空网站缓存文件,以及上传网站文件至 GitHub:

    1
    2
    3
    hexo clean
    hexo g
    hexo d
  3. 部署时会让你输入 GitHub 的账号和密码,乖乖输入:

  1. 待上传完毕后会显示 Deploy Done:
  1. 接着在浏览器输入你的 github_io_link 1 ,即可访问到刚才在本地测试的页面了:

结尾

至此,将 Hexo 搭建至 GitHub 的部分你就已经搞定了。

关于如何发布文章,安装主题和插件,定制 CSS 样式,我会陆续不断发布在博客上,你也可以即可自行借助 Hexo 官网的文档 以及强大的 Google 继续学习。

Windows 用户?

由于我手里没有 Windows 电脑,所以本教程未制作 Windows 版,不过本文使用的工具均有 Windows 版本。

如果你是 Windows 用户,请在 Node.js 官网 安装 Node.js,Git For Windows 下载 Git,以及 淘宝 NPM 安装 NPM,并将以上教程中提到的终端更改为 CMD 执行即可。

欢迎在底部评论区贴出你的博客链接
Enjoy it.

  1. 1.Github_io_link = 你 GitHub 的账号.github.io
  2. 2.仓库 = 对应 GitHub 中的 Repositories
  3. 3.你建立的 Repositories 链接,打开 Repositories 之后,复制网址栏或在 Clone or Download 处即可获得
Sunbelife wechat