【转载】年轻人的第一个博客,hexo零基础/零成本搭建教程

这篇教程是 sunbelife 发布在其同名公众号上,已获得作者同意,全文转载。

作者是 ibeta.me 尝鲜派网站的创始人。

前言

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

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

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

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

开始之前,为了避免理解差异和排版美观,先和各位约定一下本教程的使用方法:

一些需要多次使用的内容,为放混淆,我会在开始时进行详细解释,并赋予一个英文代称,文章后续会直接使用该代称,并用 细斜体 表示。

  1. my_title = 你文章的标题。
    即后面文章出现的 my_title 即都代表着你文章的标题。

  2. 以 粗斜体 展示的内容,是你需要根据实际情况自行替换的。
    如 cd /Users/你的用户名/Desktop,即需要先找到你的用户名,比如 Sunbelife,该段即为 cd /Users/Sunbelife/Desktop

  3. 以下代码块方式展示的内容,一般情况下是你需要输入在终端或控制台内的,但也有特殊情况,比如示例或实例代码的展示:

    1
    代码块

定义区

仓库 = 对应 GitHub 中的 Repositories

github_io_link = 你 GitHub 的账号.github.io

github_project_link = 你建立的 Repositories 链接,打开 Repositories 之后,复制网址栏或在 Clone or Download 处即可获得。

事先准备

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

  1. 打开 GitHub 官网 (www.github.com) ,输入用户名、密码、邮箱,并点击 Sign Up for GitHub.
    注:密码请同时包含大小写字母与数字。

  2. 在接下来页面中选择 Free Plan 即可,点击下一步。

  3. 最后一个页面中直接跑到最下面选择 skip this step 即可。

  4. 然后去你的邮箱点击验证邮件的链接。

  5. 点击之后会自动再次打开 GitHub,点击左下角的 New Repositories,新建一个 仓库。

  6. 在名称位置输入你的 github_io_link,并点击底部的 Create repository.

  7. 在接下来的页面中点击 Glone or Download,获取 github_project_link 备用。

在本地安装 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,即可看到博客已经可以成功在本地访问了:

  7. 如果你访问不到这个页面,请检查上面是不是哪一步出错了,如果能成功访问,恭喜你已经完成了一大半,接下来的工作就是把它放到 GitHub 的服务器,让所有人都能通过链接随时访问你的博客。(嘟酷注:出错有可能是因为 npm 安装 hexo 程序的时候就有问题,建议使用 cnpm 安装,具体参考《Mac 下安装 homebrew / nodejs / hexo》)

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

部署至 GitHub

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

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

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

    1. 在 type 后写入 git。

    2. 增加 repo: github_io_link

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

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

    (嘟酷注:也可使用 vim 命令进行修改。)

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

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

  7. 待上传完毕后会显示 Deploy Done:

  8. 接着在浏览器输入你的 github_io_link,即可访问到刚才在本地测试的页面了:

结尾

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

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

Windows 用户?

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

如果你是 Windows 用户,请依次安装以下工具:

  1. 在 Node.js 官网 (http://nodejs.cn/) 安装 Node.js.

  2. Git For Windows (https://gitforwindows.org) 下载 Git.

  3. 在淘宝 NPM (https://npm.taobao.org/) 安装 NPM。

接着并将以上教程中提到的终端更改为 CMD 执行即可。

-------- 本文结束  感谢阅读 --------
0%