在github上部署自己的hexo个人博客

喜欢ヅ旅行 2022-06-09 08:52 257阅读 0赞

> 约定$命令行在git bash中执行，其余的在cmd中执行。

## 前期的准备 ##

*  git客户端
 *  github账号
 *  node.js
 *  创建仓库

> 在开始一定要注意node的环境变量和系统变量的配置问题，有了webpack配置的前车之鉴，当出现 `<command> 不是内部或外部命令也不是可运行的程序`时，首先想到的是环境变量的问题。如果没有设置，则不可以使用`npm`本地安装`node_modules`

建立仓库时注意，仓库的名字必须是**用户名.github.io**(注意是必须！)，接着配置SSH。

### 配置SSH ###

1.  打开Git Bash终端：在桌面右键，会出现”Git Bash here”的选项，点击即可。
2.  设置user name和email：

生成ssh密钥：

生成的包括**id\_rsa**和**id\_rsa.pub**。**id\_rsa文件是私钥**

#### 添加公钥到github： ####

头像 —> setting —> SSH and GPG keys选项 —> New SSH key(新建SSH)，将id\_rsa.pub中的内容复制到key文本框，再点击`Add SSH key(添加SSH)`

#### 测试SSH ####

接下来会出来下面的确认信息：

## 博客本地仓库的创建 ##

在本地创建Hexo(任意名字)，前提是环境变量已配置完成。

## 本地安装hexo ##

1.  hexo全局安装

1.  初始化hexo

1.  安装依赖

1.  启动hexo

启动之后，打开浏览器，在地址栏输入：[http://localhost:4000，你会看到Hexo的示例页面。][http_localhost_4000_Hexo]

## 测试hexo ##

1.  新建文章

此时在source\_posts文件夹中便会多出一个文档”title.md”.  
如果要删除，直接在此文件夹下删除对应的文件即可。

1.  生成静态页面

1.  清除生成内容

执行此操作会删除public文件夹中的内容。

1.  部署hexo

该操作会将hexo生成的静态内容部署到配置的仓库中

## 部署hexo ##

1.  编辑配置文件，关联远程仓库：  
    在编辑器中打开Hexo配置文件\_config.yml，找到下面内容并修改：

> 注意：type、repo、branch的前面有两个空格，后面的:后面有一个空格

安装git插件：

> 如果没有安装git插件，会有错误提示，安装后重新部署就可以了。

部署：

现在，可以使用`http://<用户名>.github.io`查看你的博客了。

## hexo常用参数设置 ##

### 配置文件说明 ###

网站配置文件是在根目录下的\_config.yml(站点配置文件)文件，是yaml格式的。  
所有的配置项后面的冒号（:）与值之间要有一个空格。

> 这个配置文件很长，但是需要修改的只有几项

<table style="border-width:initial; border-style:none; border-color:initial; border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; font-size:14px; table-layout:fixed"> 
 <tbody> 
  <tr style="background-color:rgb(249,249,249)"> 
   <td style="border-width:initial; border-style:none; border-color:initial; padding:0px; vertical-align:middle"> <pre style="margin-top:0px; margin-bottom:0px; background:rgb(239,242,243); overflow:auto; font-family:consolas,Menlo,&quot;PingFang SC&quot;,&quot;Microsoft YaHei&quot;,monospace; font-size:13px; padding:10px; color:rgb(134,145,148); line-height:1.6; border:none; text-align:right">
     
      
     <div style="height:20px">
      
       
      1
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      2
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      3
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      4
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      5
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      6
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      7
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      8
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      9
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      10
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      11
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      12
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      13
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      14
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      15
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      16
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      17
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      18
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      19
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      20
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      21
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      22
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      23
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      24
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      25
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      26
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      27
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      28
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      29
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      30
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      31
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      32
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      33
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      34
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      35
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      36
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      37
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      38
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      39
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      40
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      41
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      42
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      43
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      44
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      45
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      46
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      47
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      48
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      49
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      50
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      51
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      52
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      53
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      54
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      55
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      56
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      57
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      58
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      59
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      60
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      61
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      62
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      63
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      64
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      65
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      66
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      67
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      68
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      69
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      70
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      71
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      72
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      73
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      74
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      75
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      76
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      77
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      78
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      79
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      80
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      81
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      82
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      83
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      84
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      85
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      86
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      87
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      88
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      89
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      90
     
      
     </div></pre> </td> 
   <td style="border-width:initial; border-style:none; border-color:initial; padding:0px; vertical-align:middle"> <pre style="margin-top:0px; margin-bottom:0px; background:rgb(247,247,247); overflow:auto; font-family:consolas,Menlo,&quot;PingFang SC&quot;,&quot;Microsoft YaHei&quot;,monospace; font-size:13px; padding:10px; color:rgb(77,77,76); line-height:1.6; border:none; width:750px">
     
      
     <div style="height:20px">
      
       
      # Hexo Configuration
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      ## Docs: https://hexo.io/docs/configuration.html
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      ## Source: https://github.com/hexojs/hexo/
     
      
     </div>
     
      
     <div style="height:20px"></div>
     
      
     <div style="height:20px">
      
       
      # Site
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      title: Awesome_929
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      subtitle:
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      description:
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      author: Zoe
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      language:
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      timezone:
     
      
     </div>
     
      
     <div style="height:20px"></div>
     
      
     <div style="height:20px">
      
       
      # URL
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      url: corbusier.github.io
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      root: /
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      permalink: :year/:month/:day/:title/
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      permalink_defaults:
     
      
     </div>
     
      
     <div style="height:20px"></div>
     
      
     <div style="height:20px">
      
       
      # Directory
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      source_dir: source
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      public_dir: public
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      tag_dir: tags
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      archive_dir: archives
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      category_dir: categories
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      code_dir: downloads/code
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      i18n_dir: :lang
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      skip_render: [] 
     
      
     </div>
     
      
     <div style="height:20px"></div>
     
      
     <div style="height:20px">
      
       
      # Writing
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      new_post_name: :title.md # File name of new posts
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      default_layout: post
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      titlecase: false # Transform title into titlecase
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      external_link: true # Open external links in new tab
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      filename_case: 0
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      render_drafts: false
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      post_asset_folder: false
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      relative_link: false
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      future: true
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      highlight:
     
      
     </div>
     
      
     <div style="height:20px">
      
       
        enable: true
     
      
     </div>
     
      
     <div style="height:20px">
      
       
        line_number: true
     
      
     </div>
     
      
     <div style="height:20px">
      
       
        auto_detect: false
     
      
     </div>
     
      
     <div style="height:20px">
      
       
        tab_replace:
     
      
     </div>
     
      
     <div style="height:20px"></div>
     
      
     <div style="height:20px">
      
       
      # Category &amp; Tag
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      default_category: uncategorized
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      category_map:
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      tag_map:
     
      
     </div>
     
      
     <div style="height:20px"></div>
     
      
     <div style="height:20px">
      
       
      # Date / Time format
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      ## Hexo uses Moment.js to parse and display date
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      ## You can customize the date format as defined in
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      ## http://momentjs.com/docs/#/displaying/format/
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      date_format: YYYY-MM-DD
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      time_format: HH:mm:ss
     
      
     </div>
     
      
     <div style="height:20px"></div>
     
      
     <div style="height:20px">
      
       
      # Pagination
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      ## Set per_page to 0 to disable pagination
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      per_page: 10
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      pagination_dir: page
     
      
     </div>
     
      
     <div style="height:20px"></div>
     
      
     <div style="height:20px">
      
       
      # Extensions
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      ## Plugins: https://hexo.io/plugins/
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      ## Themes: https://hexo.io/themes/
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      plugins:
     
      
     </div>
     
      
     <div style="height:20px">
      
       
        # hexo-generator-feed #RSS订阅插件
     
      
     </div>
     
      
     <div style="height:20px">
      
       
        # hexo-generator-sitemap  #sitemap插件
     
      
     </div>
     
      
     <div style="height:20px"></div>
     
      
     <div style="height:20px">
      
       
      ## Themes: https://hexo.io/themes/ #主题
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      theme: landscape
     
      
     </div>
     
      
     <div style="height:20px"></div>
     
      
     <div style="height:20px">
      
       
      # Deployment
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      ## Docs: https://hexo.io/docs/deployment.html
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      deploy:
     
      
     </div>
     
      
     <div style="height:20px">
      
       
        type: git
     
      
     </div>
     
      
     <div style="height:20px">
      
       
        repo: git@github.com:Corbusier/Corbusier.github.io.git #github仓库地址
     
      
     </div>
     
      
     <div style="height:20px">
      
       
        branch: master # github分支
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      #sitemap
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      sitemap:
     
      
     </div>
     
      
     <div style="height:20px">
      
       
        path: sitemap.xml
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      #feed
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      atom:
     
      
     </div>
     
      
     <div style="height:20px">
      
       
        type: atom
     
      
     </div>
     
      
     <div style="height:20px">
      
       
        path: atom.xml
     
      
     </div>
     
      
     <div style="height:20px">
      
       
        limit: 20
     
      
     </div>
     
      
     <div style="height:20px"></div>
     
      
     <div style="height:20px">
      
       
      # links:
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      #   Feed: /atom.xml
     
      
     </div>
     
      
     <div style="height:20px">
      
       
      #   SiteMap: /sitemap.xml
     
      
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

### 常用插件 ###

如果是扩展插件，要在\_config.yml配置文件中添加插件信息，是plugins配置项。  
比如下面的两个插件：

安装插件，后面要加上–save，表示依赖项。

*  RSS订阅插件  
    hexo-generator-feed：生成rss订阅文件

添加配置信息

*  SiteMap插件  
    hexo-generator-sitemap：生成易于搜索引擎搜素的网站地图

添加配置信息：

可以在主题配置文件中添加相关配置，可以在页面上显示。比如，添加链接信息

*  Git插件  
    hexo-deployer-git：使用git同步代码到git仓库中

## 主题 ##

默认的主题是**landscape**  
官方主题地址：[thems][]

### 切换主题 ###

我是用的是`next`，以此为例：

在站点配置文件`_config.yml`文件中修改主题配置，比如修改theme: landscape为theme: next；

除了之前的主题`git clone`和修改站点配置文件外，还需要以下的操作：

再打开网页，之前丑陋的landscape主题就被替换了。

更为详细的设置：[NexT主题][NexT]

## 使用travis部署hexo ##

现在博客基本可以运行了，但是如果需要多个电脑之间推送会不太方便。hexo使用的部署命令只是把静态文件上传到仓库中，在其他电脑同步下的只是静态文件而非源码。所以使用自动部署非常有必要。介绍使用`Travis CI`持续集成并部署。

### 配置多个SSH ###

*  生成ssh密钥  
    可以使用全局的ssh密钥，不过建议使用单独的ssh密钥，在这里以单独ssh密钥为例。

输入上面命令后回车一下，当提示Enter file in which to save the key (/c/Users/Seay/.ssh/id\_rsa):时，输入新的ssh密钥文件路径和文件名(不能是.ssh/id\_rsa)，这里输入id\_rsa\_blog，然后一路回车。

*  添加ssh到github

登录到github中，点击进入到博客仓库。点击右上方的Settings进入到设置页面，点击左边的Deploy keys项。  
在右上点击Add deploy key，然后在下面输入标题，把生成的密钥id\_rsa\_blog.pub里面的内容复制到key文本框中，选中下面的Allow write access，最后点击Add key。

*  新建配置文件  
    在.ssh文件夹中创建一个名为config的配置文件。
    
    <table style="border-width:initial; border-style:none; border-color:initial; border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; font-size:14px; table-layout:fixed"> 
     <tbody> 
      <tr style="background-color:rgb(249,249,249)"> 
       <td style="border-width:initial; border-style:none; border-color:initial; padding:0px; vertical-align:middle"> <pre style="margin-top:0px; margin-bottom:0px; background:rgb(239,242,243); overflow:auto; font-family:consolas,Menlo,&quot;PingFang SC&quot;,&quot;Microsoft YaHei&quot;,monospace; font-size:13px; padding:10px; color:rgb(134,145,148); line-height:1.6; border:none; text-align:right">
           
            
         <div style="height:20px">
          
             
            1
           
            
         </div></pre> </td> 
       <td style="border-width:initial; border-style:none; border-color:initial; padding:0px; vertical-align:middle"> <pre style="margin-top:0px; margin-bottom:0px; background:rgb(247,247,247); overflow:auto; font-family:consolas,Menlo,&quot;PingFang SC&quot;,&quot;Microsoft YaHei&quot;,monospace; font-size:13px; padding:10px; color:rgb(77,77,76); line-height:1.6; border:none; width:121px">
           
            
         <div style="height:20px">
          
             
            $ touch config
           
            
         </div></pre> </td> 
      </tr> 
     </tbody> 
    </table>
 *  编辑配置信息  
    用编辑器打开config文件，添加如下信息：

提示：`这里的密钥文件路径根据自己的做相应修改。`

### 配置Travis ###

*  接入Travis  
    打开[Travis CI][]，使用github账号登陆。

将鼠标放在右上角的用户名上，点击Account选项，会显示github的项目。  
找到博客项目，点击前面带有 X 符号的按钮，开启travis支持。

*  安装travis  
    Travis安装需要Ruby环境，所有需要安装Ruby,并且需要安装rubygems插件。
    
    > 假设已经安装了Ruby！

*  新建配置文件  
    首先打开博客项目文件夹，在项目根目录新建.travis.yml配置文件。

*  复制ssh私钥  
    在项目根目录创建文件夹.travis

将开始生成的ssh密钥文件id\_rsa\_bolg复制到.travis文件夹下：

*  ssh配置文件  
    这个ssh配置文件是用于在部署机器上使用的，不是本地的ssh配置文件，后面的travis配置文件会用到。

在.travis文件夹中新建文件ssh\_config

编辑配置文件，添加如下内容：

*  登陆travis

根据提示输入github的用户名和密码。

*  加密操作
    
    在这一步使用了其他的方法，也许是win7的电脑不一样，使用了另一种方法，第一种方法参考：[常用配置方法][Link 1]。

当使用travis 加密操作时，`travis encrypt 'REPO_TOKEN=<TOKEN>' --add`

得到的反馈是：

`Can't figure out GitHub repo name. Ensure you're in the repo directory, or speci fy the repo name via the -r option (e.g. travis <command> -r <owner>/<repo>)`

按照错误提示重新加密：

`travis encrypt -r Corbusier/Corbusier.github.io GH_Token=XXX`可以在CMD中得到形如：

将其复制到`.travis.yml`配置文件中使用。  
完整配置文件的参考：[travis配置文件][travis]

### 本地提交操作 ###

配置完成后需要本地提交，删除原先产生的`.git`文件夹，执行初始化操作：

`$ git init`

关联远程仓库

*  推送仓库提交本地修改，推送至github仓库。

在commit后，推送至`dev`分支前，需要先查看git分支，然后创建`dev`分支后才能推送成功，附git基础命令：  
[git基础命令][git]

push本地的代码至远程仓库之后，在[https://travis-ci.org后台查看相关情况。][https_travis-ci.org]  
下面是成功的结果：

> ！！！之后用图取代链接  
> [travis][travis 1]

以上就是自动部署Hexo的另一方法。

## 异地同步博客内容 ##

如何将两台电脑上博客的内容同步内，即两台电脑上都可以编辑更新博客？要解决这个问题，首先我们要清楚我们博客文件的组成：

*  node\_modules
 *  public
 *  scaffolds
 *  source
 *  themes
 *  \_config\_yml
 *  db.json
 *  package.json
 *  .deploy\_git

我们博客上呈现的内容，其实就是public下的文件内容。那么这个Pulic目录是怎么生成的呢？  
以下文件以及目录是必须要同步的：

*  source
 *  themes
 *  \_config.yml
 *  db.json
 *  package.json
 *  .deploy\_git

采用github去备份，也就是新建一个项目用来存放以上文件，每次更新后推送到github上，用作备份同步。  
假设我们现在配置了一台新电脑，里面没有安装任何有关博客的东西，那么我们开始吧：

*  下载node.js并安装（官网下载安装），默认会安装npm。
 *  下载安装git（官网下载安装）
 *  下载安装hexo。方法：打开cmd 运行npm install -g hexo（要翻墙）
 *  新建一个文件夹，如MyBlog
 *  进入该文件夹内，右击运行git，输入：hexo init（生成hexo模板，可能要翻墙)

我们重复了一开始搭建博客的步骤，重新生成了一个新的模板，这个模板中包含了hexo生成的一些文件。

*  git clone 我们备份的项目，生成一个文件夹，如：MyBlogData
 *  将MyBlog里面的node\_modules、scaffolds文件夹复制到MyBlogData里面。

做完这些，从表面上看，两台电脑上MyBlogData目录下的文件应该都是一样的了。那么我们运行hexo g && hexo d试试，如果会报错，则往下看。

> 这是因为.deploy\_git没有同步，在MyBlogData目录内运行:npm install hexo-deployer-git –save后再次推送即可

总结流程：当我们每次更新MyBlog内容后，先利用hexo将public推送到github，然后再将其余必须同步的文件利用git推送到github。

## 附录 ##

### hexo常用命令 ###

## 扩展hexo ##

### 添加最近访客 ###

在需要添加最近访客的网页对应的 markdown 文件中添加如下代码：

### 鼠标点击小红心的设置 ###

1.  将 love.js 文件添加到 \\themes\\next\\source\\js\\src 文件目录下。
2.  找到 \\themes\\next\\layout\_layout.swing 文件， 在文件的后面， 标签之前 添加以下代码：

### 背景的设置 ###

1.  将 particle.js 文件添加到 \\themes\\next\\source\\js\\src 文件目录下。
2.  找到 \\themes\\next\\layout\_layout.swing 文件， 在文件的后面，标签之前 添加以下代码：

### 修改文章内链接文本样式 ###

将链接文本设置为蓝色，鼠标划过时文字颜色加深，并显示下划线。  
找到文件 themes\\next\\source\\css\_custom\\custom.styl ，添加如下 css 样式：

### 添加来必力评论功能 ###

[参考链接][Link 2]

### 给 Github 添加 README ###

默认情况下，Github中每一个项目，我们希望有一份 README.md 的文件来作为项目的说明，但是我们在项目根目录下的 blog\\source 目录下创建一份 README.md 文件，写好说明介绍，部署的时候，这个 README.md 会被 hexo 解析掉，而不会被解析到 Github 中去的。  
正确的解决方法其实很简单：

> 把 README.md 文件的后缀名改成 “MDOWN” 然后扔到blog/source文件夹下即可，这样 hexo 不会解析，Github 也会将其作为 MD 文件解析。

[http_localhost_4000_Hexo]: http://localhost:4000%EF%BC%8C%E4%BD%A0%E4%BC%9A%E7%9C%8B%E5%88%B0Hexo%E7%9A%84%E7%A4%BA%E4%BE%8B%E9%A1%B5%E9%9D%A2%E3%80%82/
[thems]: https://hexo.io/themes/
[NexT]: http://theme-next.iissnan.com/getting-started.html
[Travis CI]: https://travis-ci.org/
[Link 1]: http://www.jianshu.com/p/7f05b452fd3a
[travis]: https://github.com/Corbusier/Corbusier.github.io/blob/dev/.travis.yml
[git]: http://www.cnblogs.com/newpanderking/p/4005698.html
[https_travis-ci.org]: https://travis-ci.xn--org-px1ewl87i8fo87g8gour9a7fa./
[travis 1]: https://travis-ci.org/Corbusier/Corbusier.github.io
[Link 2]: https://blog.smoker.cc/web/add-comments-livere-for-hexo-theme-next.html