写给朋友的Hexo建站指南，含Coding Pages、域名解析

2018-01-19  本文已影响248人  KwokKwok

有朋友会问我自己怎么搭个博客，复不复杂，已经有了域名应该怎么搞。其实当时我自己弄的时候，虽然照着网友写的步骤，但还是折折腾腾的，出了问题也是一头雾水。所以，考虑自己写一篇这种文章，尽量能写的清楚一些。我会假设你对这方面没什么了解，尽量给你解释你的每一步操作都做了什么，会有什么影响。当然时间紧促，如果你有什么建议，非常希望你能告诉我，我会尽快修改。

简单说一下要讲的事情

Hexo是这样一个东西，它有很多工具能帮你快速搭建一个网站，也有很多的主题可以选择。有了这个东西，你只需要做一些简单的配置，就可以有一个组织良好的网站以及不错的界面。特别适合写写博客等。

其实网站也可以理解为一大堆组织良好的页面文件，平时说的上网，可以理解成在浏览器打开了别人电脑上的文件。此处的别人电脑，就是我们平时说的服务器。借助Hexo搭建了自己的站点之后，你也需要这么一个服务器，一直运行着，提供访问服务。

你当然可以将自己的电脑作为服务器连到外网一直开着。但所幸不用这么麻烦，有些网站免费提供托管服务，你把生成的网站内容放到他们的服务器上(这个动作我们称之为部署**)，大家就能通过他们的服务器访问了。提供这种服务的，主要有两个：

  1. 最出名的就是Github Pages，所有的xxx.github.io都是使用的这种方式。
  2. 国内的Coding Pages，访问速度要更好，所有的xxx.coding.me都是使用的这种方式。我这篇文章也是使用这种方式。

当我们把通过Hexo搭建的站点部署上去后，我们就可以通过xxx.github.io或是xxx.coding.me访问我们使用Hexo搭建的站点了。

这时，你可能会想，要是能使用自己的域名就更好了，毕竟一个域名现在也不贵，便宜点几块钱就能拿下。到这里就涉及到域名解析的问题了，简单说就是达到输入我的域名，显示你的内容的效果。

主要就是这些东西。

文章主要内容有：

  1. 安装Hexo
  2. 写文章
  3. 配置主题
  4. 托管到Coding Pages
  5. 自定义域名
  6. 日常的使用流程

安装Hexo

安装Hexo，需要依赖Node.js和Git这两个东西，这里提供了目前在Hexo使用稳定较新的版本，请先点击下载安装。

安装上边的两个软件之后，接下来在终端命令行执行下边的命令（Windows的CMD窗口）安装Hexo

npm install -g hexo-cli

建站

初始化Hexo工作的目录，你的站点文件也会在这里面：

  1. 先找一个合适的目录
  2. 使用命令行切换到这个目录，可以使用Shift+鼠标右键选择"在此处打开PowerShell窗口"。
  3. hexo init <folder>，将<folder>替换为你要创建的文件夹名称，初始化该目录。约定一下，之后我就用<folder>代表这个你新建的目录了。
  4. cd <folder>进入该目录，其实这时候已经可以运行了。但是稳妥起见，还是先执行完下一步。
  5. npm install安装Node的依赖模块，就是文件夹node_modules中的东西，是Hexo的一些依赖模块。

安装完成以后，先来简单看看这个目录有什么：

  1. _config.yml，这个就是网站的配置信息了，网站的标题之类的。以及之后我们要设置主题、设置外网托管(部署)都是在这里。
  2. source，源目录，你的文件就是保存在这里面的，你的主题会根据你的源文件，生成统一样式的界面。
  3. themes，主题。刚安装完Hexo只有一个landspace，这是默认主题。怎么换主题我们之后再说。

运行一下试试看：

命令行定位到<folder>位置，输入hexo s -g，这个命令的意思是，先(-) 执行 生成(g) 再 启动服务器(s)。然后你就可以在浏览器打开localhost:4000，应该能看到如下页面。

正常启动

写篇文章？

这里不推荐官方的那种了，说说我平时怎么用的吧。

还记得之前分析目录时提到的那个source目录么，就是<folder>/source，打开它之后能看到一个_posts目录，打开_posts，我们就在这里面编辑文件（写、改、删）了。

在这里面，你可以写Markdown、HTML都可以，你的主题会根据你的内容生成样式丰富的文档。但是和一般的Markdown、HTML不一样的是，在文件的开头需要配置一些东西。打开你的Hello-world.md文件看一看，它的开头有这样一些东西。

---
title: Hello World
---

上面的内容就是说，我这篇文章，发布的时候，标题(title)是Hello World。这里注意一个细节，你的文件标题其实是Hello-world。发现了么？它是按照你的配置信息去生成最终文档的。

这里划个重点，不管是修改_config.yml，还是在这里，选项值(比如这里的Hello World)前面 必须加空格！ 你可以把空格去掉试试看。

贴一个我一般使用的配置项，配置名字、时间、还有多个标签：

---
title: 关于Socket
date: 2018-01-12 20:11:00
tags:
- 计算机网络
- Socket
- C#
- Python
---

更多详细的配置信息可以查看Hexo文档/Front-matter。

想换个主题？

可以查看自己喜欢的主题，选择时除了美观还应该考虑到以下几点：

  1. 自适应，是否提供移动端UI
  2. 是否需要评论、统计等功能，该主题有没有考虑到，如果已经集成的话会很省事。

以NexT主题为例

NexT是一个比较出名的主题，这里我们以它作为例子。

通过搜索引擎搜索Hexo NexT可以找到主题的相关信息，比如这里我就找到了NexT的文档。

首先，获取NexT主题

目的是将NexT主题放到<folder>/themes文件夹下，和landscope平级。

在命令行输入以下指令

cd <folder>
git clone https://github.com/iissnan/hexo-theme-next themes/next

第一条指令进入<folder>目录，第二条指令将NexT的文件从Github克隆到了themes/next文件夹。

现在你的themes文件夹下应该有了一个next文件夹，接下来我们就来使用它。

接下来，应用NexT主题

打开<folder>目录下的_config.yml，找到theme: landscope条目，将landscope换成next，即刚才创建的目录名（注意分号后跟空格）。最终就是theme: next这样。

现在，我们重新生成并启动服务器：

hexo s -g

打开localhost:4000观察一下：

Next.PNG

Wow，大变样！

之后需要更多主题相关的配置，可以去查看该主题的文档或者从搜索引擎搜索该主题。不一样的主题，都有些自己特殊的配置。这里就不仔细说了。

想要外网访问？

首先，由谁来托管？

github.io是很出名很好的选择，但是在我看来，对大部分人来说coding.me或许是更好的选择。Coding处于国内，网络访问比起Github也要顺畅很多。

也可以两个一起用，我刚开始就是这样的，但是后来发现使用github.io完全没必要，并且后边如果需要提交站长平台或是做统计，还要做针对性的工作。我就放弃了github.io。另外那种说国外访问github.io，国内访问coding.me，对我来说，国外访问coding.me无非多了几十毫秒的延迟。另外，还有一个小问题，真的有外国人看你的中文博客么......

所以，我这次就使用Coding做演示，我也建议你使用Coding。如需要使用Github，这一块也可以查一下别的教程。网上已经有大量的Github Pages的内容。

Coding Pages

注册

首先，去Coding注册一个账号。这里需要注意的是起名字，如果之后不打算买域名的话，就要使用{yourname}.coding.me这样的域名了。

创建项目

参考自Coding Pages

  1. 点击「创建新项目」
  2. 项目起名{yourname}.coding.me，并勾选「使用README.md初始化项目」
  3. 通过仓库中的「Pages 服务」菜单进入设置页面，在部署来源中选择「master 分支」，保存后您的 Pages 已启动运行
  4. 这时打开{yourname}.coding.me，会是404页面，因为仓库里什么都没有。这时如果在仓库根目录添加一个index.html，再次打开网址就是显示的这个页面了。(仓库更新后有延迟，多刷新几遍)。

这里我们就不用自己去写网页了，我们把自己刚才使用Hexo搭建的网站，想办法搬到{yourname}.coding.me(其实就是放到你的仓库中去)就可以了。称为Hexo部署。

Hexo部署

我们先设置一下部署选项，把Coding的信息添加到配置中。还是在那个配置文件里，_config.yml

文件最后面有deploy这一项，如果没做修改的话，它是这样子的

deploy:
  type:

空空如也，我们做一下修改：

deploy:
  type: git
  repository:
     coding: {address}
  branch: master

把{address}替换成你的仓库地址就可以了。

想要得到你的仓库地址，参看下图，先点击「HTTPS」，然后点击后面的「复制」按钮就得到地址了。

仓库地址

修改完毕，保存，接下来我们使用一条命令，生成并部署：

hexo d -g

这条命令的意思是：先(-) 执行 生成(g) ，之后执行 部署(d)

如果遇到了这个错误：

ERROR Deployer not found: git

这是因为需要安装一个模块hexo-deployer-git，用于git的部署，需要执行的命令是

npm install hexo-deployer-git --save

安装完毕，我们再尝试部署。

这次会弹框，让你输入你的账号名和密码。

Coding验证

都没问题的话最后会显示：

INFO Deploy done: git

这时，你再去Coding的网站打开你的仓库，就会发现一大堆东西，都是Hexo自动帮你创建的。

另外，这也就意味着，你可以打开{yourname}.coding.me查看效果了。

想用自己的域名？

首先，不管是阿里云万网还是什么别的地方，挑一个喜欢的域名。

买完后，进入控制台，点击这个域名的「解析」，进入解析界面。像我已经设置过了的就像下面的样子。

解析界面

比如我有三条解析规则，最重要的是我用荧光笔圈出来的两个属性。

结合我的域名(kwok.ink)解释一下这两个属性：

  1. 主机记录cloud，记录值balabala.cc。简单理解为，当你在浏览器输入cloud.kwok.ink时，展示balabala.cc的界面。
  2. 主机记录www，记录值gazebo.coding.me。简单理解为，当你在浏览器输入cloud.kwok.ink时，展示gazebo.coding.me的界面。
  3. 主机记录@，意思是空，相应的访问地址就是kwok.ink。后面我就不说了。

知道了这些，那接下来我想要输入test.kwok.ink就显示name.coding.me的界面，你大概已经知道怎么做了。

添加域名解析.PNG

之后打开test.kwok.ink，发现还是有问题。

解析404

是这样的，你需要在你的Coding仓库的「Pages 服务」中将「自定义域名」设置一下。

自定义域名.PNG

之后再打开test.kwok.ink就有内容了。

只是你会发现，第一次启动的时候会有一个Coding Pages的宣传页，感觉很不好。其实是这个东西：

HostedByCoding

我的做法是，在主题的配置信息里，底部信息加上了Coding Pages。效果的话，就是这样子：

我的做法

然后点击上边的「已放置」，审查一两天就会通过。通过后就没有了。

关于HTTPS和HTTP

注意到「Pages 服务」页面有一个「强制HTTPS访问」，建议启用。

启用后有时候会遇到一个问题，就是如果要引用外站的非HTTPS(http)资源(图片什么的)会被拒绝。解决方法就是把这个资源换成HTTPS的，或是资源下载下来，放到仓库中或者图床(专门放置图片的)等地方再使用。

日常使用流程

  1. 打开<folder>/source/_post
  2. 写一个HTML或Markdown
  3. 在文本开始的位置前面加上title、tags、date等信息
  4. 回到<folder>目录
  5. 执行hexo s -g，生成并在localhost:4000查看效果。确保没问题，有问题再改。
  6. 执行hexo d部署到云端。

命令

创建目录和初始化这些东西，刚开始的时候用一次，之后就基本用不到了。

日常常用的命令大概有这些：

hexo g -> 生成
hexo s -> 启动本地服务器，可以在localhost:4000来做个预览
hexo d -> 部署到云端，可以外网访问

最重要的是我们之前演示过的组合使用：

hexo s -g -> 先生成，再启动服务器，用于修改后的预览
hexo d -g -> 先生成，再部署到云端

写的比较匆忙，如果有疑问或是建议，非常欢迎告知，我会及时修改。谢谢你的阅读，希望能有所帮助。

上一篇下一篇

猜你喜欢

热点阅读