从0开始搭建一个hexo博客

摘要和准备工作

        我从很早以前开始就有搭建一个博客的想法，最早能够追溯到高中二年级。后来也陆陆续续尝试了搭建一群由静态页面组成的页面体系，后来发现这种页面体系有点坑，主要是但个网页的制作在页眉和页头处会有大量的相同的代码内容需要更改，而且该页面体系对于各种资源文件的路径特别敏感，很容易出错。再后来，学习的不断深入，还新学了C#的ASP.NET。这种框架的主要设计模式为动态网页开发，且这类网站挂载在IIS上，但是由于该网站服务依赖于独立的云计算资源，没钱续费，最后还是放弃了。。。经过无数次的尝试和体验，我终于发现了一个简单好用的网站框架，那就是hexo。下面就是我从0开始搭建我的hexo博客的来龙去脉。

        这里使用的是 ubuntu 18.1 的操作系统对 hexo 框架的安装和在云端的 github 的部署。关于如何安装 hexo 框架，百度上已经有许多的相关教程和方法，如何在 github 部署，也有很多的相关教程，还有着很多官方文档。所以这里的hexo网站搭建教程，主要是用来介绍我在搭建网站的时候遇到的一些问题和最后的解决方案，以通过这些给自己或其他人提供相关的意见和建议。

休伯利安号的空间

主要流程

安装主题

        我选用的主题为Fluid，该主题功能不是很多，但主要有优点使用简单，整体效果好等优点。如下是安装命令:

1
2
3
4
5
$ cd blog    #进入博客所在的目录
$ cd themes    #进入主题宝所在的目录
$ git clone https://github.com/fluid-dev/hexo-theme-fluid.git    #克隆主题文件
$ cd ../    #返回博客主目录
$ vi _config.yml    #修改博客的主配置文件

        安装好主题后可以在文件夹 themes 文件夹中即可查看。对于本次使用的主题 Fluid 需要对文件夹进行重命名，或在主文件目录下 config.yml 找到’theme’选项，改成theme: {你的主题名字}。同时我们会对主题文件会进行一些自定义的设置，为了避免配置在主题更新后失效，可以制定全局主题的配置文件: source/_data/fluid_config.yml 其中的内容可以直接从主题文件下的配置文件中复制粘贴。
        在配置主题的配置文件中，随意增加或删除一些配置选项，或者文件内容的格式不符合文件的标准格式。hexo对此也能够继续进行生成和发布，但是其生成和发布的过程中会发生报错，所以，在一开始使用过程中发生了错误或问题，不妨检查一下配置文件的配置选项和格式标准。
Fluid主题

评论功能

        由于网站是静态的，所以可以使用第三方的评论系统。目前比较常用的有 disqus | valine | gitalk | utterances | changyan | livere 这里使用的是 livere 去官网注册一个账号，放在 Fluid 主题里面完全可以傻瓜式操作。来比力的评论插件有着很多的缺点，比如加载太过于慢了，还有其本身的样式也很丑。搭建博客的初衷是为了写作，所以就不为这个问题劳心劳力了，管他长啥样，重点不那儿！效果如图所示：

LiveRe评论系统

MarkDown撰写博客

        hexo的文章标记语言MarkDown这语言之前都没有接触过的东西，作为一名业余选手，只能把自己以前写过的html连粘带贴地，直接应用到这里面来啦。就像博客的开篇起手式“翻墙的少年一样”，卑微地敲着html。我学院有位已经毕业了的学长说使用Latex给我们做了一个论文模板，我觉得他做的工作和我现在做的工作差不多。另外关于写作问题，我还是研习一下的命令就行，其他的复杂格式用html代替便是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!--more-->    #首先这是一个摘要分割符
#这是一级标题
##这是二级标题
###这是三级标题
####这是四级标题
...
![图片详情](url "{图片占位符}")    #这是放置一个图片
- [ ] 任务一 未做任务 `- + 空格 + [ ]`
- [x] 任务二 已做任务 `- + 空格 + [x]`    #这是服务列表
&nbsp;    #设置缩进之一个空格

*斜体*或_斜体_
**粗体**
***加粗斜体***
~~删除线~~
++下划线++
==背景高亮==

超链接还是<a href=""></a>比较好用

我经常去的几个网站[Google][1]、[Leanote][2]。    #参考链接

[1]:http://www.google.com 
[2]:http://www.leanote.com

使用 Markdown[1]可以效率的书写文档, 直接转换成 HTML[2]。    #注脚/引用来源



##部署在`Github`上

        首先需要有一个`Github`账户，然后新建一个`repository`使用`ReadMe.md`来创建主分支`matser`。`repository`的名字就叫`{user.name}.github.io`设置完之后，直接访问这个地址，就能跳转到相应的链接啦。之后的问题就是把我们本地的储存库推送到云端。

        首先，需要在你的`Guthub`账号设置里面添加在你计算机上生成的公钥，以便帮助云端识别你的设备，授予相应的权限。在`Ubuntu`的终端中输入以下指令：


1
2
3
4
$  ls -al ~/.ssh    #检查本地公钥的存在
>>  No such file or directory
$  ssh-keygen -t rsa -C {your_email@example.com}    #使用邮箱生成公钥，并一路按下确定建
$  cat  ~/.ssh/k8s_rsa.pub    #即可输出公钥的内容


        然后将生成的公钥复制粘贴进公钥添加的页面中即可完成公钥的添加。如图所示：


公钥页面


添加完成


        之后我们只需要在本地的终端中输入


1
2
3
$  hexo clean
$  hexo generate
$  hexo deploy


        即可成功发布。


发布界面


自定义域名访问
        我在github上注册的名字为QiQiWan所以我的博客的链接地址为qiqiwan.github.io。


        这个名字可能比较难记，所以可以自己去申请一个域名，在域名解析里面添加记录值为qiqiwan.github.io的CNAME类型解析即可。


解析界面


现在我们可以通过www.eatrice.cn来访问我们的网站啦！


  1. Markdown是一种纯文本标记语言

    
 ↩
  2. HyperText Markup Language 超文本标记语言

    ## 0. 目录{#index}    #描至页面的其他部分

     无序列表项 一    #无序列表
    + 无序列表项 二
    - 无序列表项 三

    1. 有序列表项 一    #有序列表
    2. 有序列表项 二
    3. 有序列表项 三

    >>> 请问 Markdwon 怎么用？ - 小白    #多级引用
    >> 自己看教程！ - 愤青
    > 教程在哪？ - 小白

    #代码
    、、、
    include <stdio.h>
    int main(void)
    {
        printf("Hello world\n");
    }
    、、、

    ​、、、
    graph LR    #流程图
    A—>B
    、、、

    、、、
    sequenceDiagram    #消息列表
    A->>B: How are you?
    B->>A: Great!
    、、、

    |学号|姓名|序号|    #表格
    |-|-|-|
    |小明明|男|5|
    |小红|女|79|
    |小陆|男|192|


    $ &#123;equation&#125; $    #行内公式

       #整行公式

    、、、 math    #块级公式
    x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} 
    、、、
    、、、 math
    [\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =
    1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
    {1+\frac{e^{-8\pi}} {1+\ldots} } } }]
    、、、

    #分割线
      

    **
    - - -
    —————-

    #特殊字符的使用
    特殊字符   描述     字符的代码
      空格符     &nbsp;
    <   小于号     &lt;
    >   大于号     &gt;
    &   和号     &amp;
    ￥   人民币     &yen;
    ©   版权     &copy;
    ®   注册商标     &reg;
    °C   摄氏度     &deg;C
    ±   正负号     &plusmn;
    ×   乘号     &times;
    ÷   除号     &divide;
    ²   平方（上标²）     &sup2;
    ³   立方（上标³）     &sup3;
    </code></pre></td></tr></table></figure></hexoPostRenderCodeBlock>
 ↩

                
              
            
            

            

              

  
    

      
      


  
  
    
      
        
  聊自己
  
  

      
    
  


    

  
  
    

      
      
        #学习
      
        #内容分享
      
        #自述
      
    

  




              
  

  

    

      
从0开始搭建一个hexo博客

      
https://www.eatrice.cn/post/从0开始搭建一个hexo博客/

    

    

      
        

          
作者

          
吃白饭-EatRice

        

      
      
        

          
发布于

          
2020年2月6日

        

      
      
      
        

          
许可协议