在Github上搭建Hexo博客

发表于 书写 2,762 字   |   分类于   |   访问 次   |  

本文旨在帮助你在Github上搭建自己的Hexo博客。

1. 阅读需知

  • 运行环境： Win8.1 + Hexo3.1.1
  • 预备基础： 从实践来说，只要懂得基本的电脑操作技能，不需具备编程基础。但是，请一定 不要害怕代码 ！代码这个东西，不过是计算机不能理解 自然语言 (即人类沟通时用的语言)，所以不得不创造出来的 编程语言 ，以便让计算机理解我们的指令。就算你不明白这些代码是什么意思，没关系，按部就班也可以成功搭建自己的博客。当然，如果具备一定的 Git 基础或是在命令行（DOS窗口）下操作的经验，你会觉得更容易上手。此外，掌握基本的英语可以帮助你理解在建站过程中可能出现的错误提示。

下面就让我们一起来开始搭建 Hexo 博客吧~

<!– more –>

2. 安装 Hexo 的预备工作

在安装 Hexo 前，必须检查是否已安装下列应用程序：

如未安装，点击上方对应链接，下载并安装相应程序。

3. 安装 Hexo

重启电脑（安装 Git 和 Node.js 时自动将程序目录添加到了 PATH ，为了正常运行 npm 命令，需要重启以更新 PATH ）

在Git中利用 npm 命令安装： 

npm install -g hexo

安装成功后，应该自动创建了 AppData\Roaming\npm\node_modules\hexo 文件夹。

如果在安装过程提示2，点击链接查看解决方案。

4. 搭建本地 Hexo 博客

创建新文件夹（如 C:\Blog ），用于储存 Hexo 站点内容。在该文件夹下1： 

hexo init

初始化成功后，即在目标文件夹建立网站所需要的所有文件。窗口会提示：

INFO you are almost done! Don't forget to run 'npm install' before you start blogging with Hexo!

注意！ 执行 hexo init 命令的目录即为你的 本地Hexo目录 ，很多命令都需要进入该目录（在本文中即为 C:\Blog ）执行

根据提示，运行以下命令来安装依赖包： 

npm install

稍等片刻，窗口没有提示 ERR! 便表示安装成功。至此，hexo 本地建站已完成，如果对 hexo 的目录结构想做进一步了解，参见建站 | Hexo。

5. 查看本地 Hexo 博客

在 hexo 文件夹（C:\Blog）执行以下命令： 

1
2
hexo generate
hexo server

第一条命令是生成本地站点1，在我的电脑上生成初始化本地站点花费了2.01s。

第二条命令是启动服务器2，让你的网站在本机运行。成功后会提示：

INFO Hexo is running at http://0.0.0.0:4000/

到浏览器输入 localhost:4000 或 http://0.0.0.0:4000/ 即可查看创建的站点。

实际上，现在的hexo支持更简洁的命令，这两条命令可以简略地写为： 

1
2
hexo g
hexo s

至此，本地博客已经搭建起来了。但是只能自己在本机浏览。为了分享给他人，还需要将站点上传至服务器，这里我们选择部署到GitHub Pages。

6. 将 Hexo 博客交由 Github Pages 托管

6.1. 创建 repository

首先，需要有一个 Github 账号。

然后，登录自己的 Github 主页右下角，创建一个新的repository。这个 repository的名称 一定要注意！例如Github账号是balabala，创建的repository名字必须是balabala.github.io，否则最终不能显示为网页3。

6.2. 配置 Hexo 并上传站点

Hexo 3.0 以上的版本与之前的版本设置略有差异，如果你在按照网上一般的方法执行完后报错 Error: Deployer not found : github ，则按照下面步骤进行操作4（Hexo 3用户可直接按下面步骤进行操作）。

  1. 执行如下命令: 

    npm install hexo-deployer-git --save

  2. 修改 _config.yml （在 C:\Blog 下），要把下面的 yuchen-lea 换成你自己的用户名 

    1
    2
    3
    4
    deploy:
        type: git
        repository: http://github.com/yuchen-lea/yuchen-lea.github.io.git
        branch: master

    设置时：1.注意缩进 2.属性值不能紧接属性名，也就是冒号后面要有一个 空格 。否则生成站点时会出错。

    git repository的路径有2种写法：①http方式，即示例中的 http://github.com/yuchen-lea/yuchen-lea.github.io.git ，此方式不需额外设置，但是之后每次更新博客都需要输入密码 ②git方式： git@github.com:yuchen-lea/yuchen-lea.github.io.git ，需要额外设置SSH Key，但是以后部署博客便不需要密码了。

  3. 在站点文件夹（ C:\Blog ）下1： 

    1
    2
    hexo generate
    hexo deploy

根据窗口提示，输入github的用户名和密码即可完成部署。为了保护隐私，密码不会显示（见下图），并不是没有输入上，输完密码直接回车就好。

如果不想每次更新博客都输入密码，可通过SSH Key方式登录。

现在，访问 http://yuchen-lea.github.io （把 yuchen-lea 换成你自己的用户名）就可以看到你的成果。

7. 问题与解决方法汇总

  1. 执行 Git 指令

    点击鼠标右键，选择 Git bash, 进入Git bash窗口，直接键入指令即可。

    一些指令必须在特定文件夹中执行才起作用！所以请注意是指令在哪个 文件夹 中执行。只要在该文件夹中点击右键，就自动进入该文件夹下的命令窗口。否则需要通过 cd 命令进入相应目录执行命令。

  2. npm ERR! network

    有时运行 npm 命令会提示连接错误（This is most likely not a problem with npm itself and is related to network connectivity.）。建议翻墙后重新尝试。

8. 更新历史

  • [2016-05-02 一] 补充SSH Key
  • [2015-12-26 六] 完善部署部分
  • <2015-12-16 三> 初稿
  • <2015-12-09 三> 草拟大纲

Footnotes:

1

生成文件 | Hexo

2

服务器 | Hexo

3

GitHub Pages … named username.github.io, where username is your username (or organization name) on GitHub. If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.

4

初试HEXO时deploy出现Deployer not found： github错误 | Cat's Claw

Date: 2015-12-09 三 21:07

Validate

版权声明

本文由宇晨创作，采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

首发于跬步，转载或引用请注明出处，本文永久链接：在Github上搭建Hexo博客

知识共享许可协议