Hexo+Coding搭建博客网站

灰太狼 2022-04-16 04:21 288阅读 0赞

大家好。今天我们来自己搭建一个基于Hexo的博客网站。博客转载于一个好朋友：[ChungZH][]

## 前言 ##

最近有小伙伴问我的博客是怎么搭建的，想自己做一个博客网站。为了让小伙伴们都能自己做一个网站，于是我便把我的建站过程写下来，供大家学习。

## TRY ##

### Hexo ###

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 [Markdown][]（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

### 配置环境 ###

安装Hexo前，要先安装几个程序。(安装方法自行查找，本文不再赘述)

*  [Node.js][]
 *  [Git][]

### 开始安装 ###

打开终端，输入以下内容：

$ npm install -g hexo-cli

### 建站 ###

安装完 Hexo 后，就可以正式开始建站了。

在终端中输入以下内容：

$ mkdir Hexo
    $ hexo init Hexo
    $ cd Hexo
    $ npm install

其中，Hexo 是文件夹的名字，可以修改。

### 预览 ###

在终端中输入：`hexo server`

直到出现`INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.`的时候，在浏览器中打开`localhost:4000`即可看到网站。

（关于`hexo server`，可以到[Hexo官网][Hexo]学习，本文不再赘述)

### 配置 ###

经过上一步之后，网站其实就已经搭建好了。不过为了让网站更好，我们还是配置一下 Hexo 吧。

#### 安装NexT主题 ####

在终端中输入以下内容：

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

#### 配置Hexo ####

用编辑器打开`Hexo`目录下的`_config.yml`，找到并修改以下内容：

# Site
    title: Hexo         # 此处改为你站点的标题
    subtitle:           # 此处改为你站点的副标题
    description:        # 此处改为你站点的说明
    keywords:           # 此处改为你站点的关键字
    author: John Doe    # 此处改为你的名字
    language:           # 此处改为 zh-CN
    timezone:           # 此处改为 Asia/Shanghai
    
    
    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://yoursite.com
    root: /
    permalink: :year/:month/:day/:title/   # 此处可以改为 :title/
    permalink_defaults:
    
    
    
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: landscape   # 此处改为 next

修改完之后，再次在终端中输入：`hexo clean && hexo server`，然后在浏览器中打开`localhost:4000`，即可出现以下效果：

![Hexo][Hexo 1]

是不是很好看呢~

--------------------

好了，我们继续配置。

#### 配置Next ####

这里推荐前往[iissnan][]的网站学习。如有不成功的，可在评论区留言。我会尽力解答。

#### 上传至Coding Pages ####

首先，在[Coding][]网站注册一个账号，同时在[腾讯云][Link 1]注册一个账号。

然后打开[Coding][]网站主页，点击左上角的`购买`按钮，出现如下界面：

![Coding][Coding 1]

点击`银牌会员`下面的`马上升级`，就会跳转到绑定页面。在这个页面里绑定你的腾讯云账号即可。

##### 配置ssh #####

[coding][]这里推荐Coding官方文档。

##### 创建项目 #####

[coding][coding 1]这里还是推荐Coding官方文档。

（注意：文档中的 2.使用`master` 分支向`{user_name}.coding.me` 项目添加测试用的 index.html 文件 这一步不用做。做到 3.在项目里点击『代码 -> Pages 服务』 … 即可）

创建完项目之后，打开你的项目的主页，找到如下界面：

![ssh][]

点击写有`HTTPS`字样的下拉框，找到`SSH`并点击。再复制右边的链接。

然后打开HEXO的\_config.yml文件，找到`deploy`：

# Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type:

并将它修改成如下

# Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: 
        coding: 你刚刚复制的那个链接

然后在终端中输入`hexo deploy -g`，你的网站就上传到Coding了。

##### 去除广告 #####

在next主题的\_config.yml中找到

#custom_text: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a>

改为

custom_text: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a>

然后打开[coding的官方文档][coding 2]，按照步骤进行配置即可。

做完了这一步之后，网站就建立完毕了！

--------------------

[ChungZH]: https://chungzh.cn/
[Markdown]: http://daringfireball.net/projects/markdown/
[Node.js]: http://nodejs.cn/
[Git]: https://git-scm.com/downloads
[Hexo]: https://hexo.io/zh-cn/docs/commands
[Hexo 1]: /images/20220416/94bdee29dac043bdaa862a1016c710b6.png
[iissnan]: http://theme-next.iissnan.com/
[Coding]: https://coding.net
[Link 1]: https://cloud.tencent.com/
[Coding 1]: /images/20220416/6ff57f2e6b844311898801ff31fb5dd2.png
[coding]: https://coding.net/help/doc/account/ssh-key.html
[coding 1]: https://coding.net/help/doc/pages/creating-pages.html#_Pages
[ssh]: /images/20220416/560969997ae44c0687c37ee76a2b504e.png
[coding 2]: https://coding.net/help/doc/pages/guide-page.html#Hosted_by_CODING_Pages