HEXO建站指南

title: HEXO 建站指南
date: 2018-1-30 12:48:25
tags:
- hexo
categories:
- 其他

系統(tǒng)配置：Ubuntu

一、配置ssh

  • 本地生成密鑰對
    ssh-keygen -t rsa -C "你的郵件地址"，注意命令中的大小寫不要搞混。按提示指定保存文件夾，不設(shè)置密碼。
  • 添加公鑰到Github
  1. 根據(jù)上一步的提示，找到公鑰文件（默認(rèn)為id_rsa.pub），用編輯器打開，全選并復(fù)制。
  2. 登錄Github，右上角 頭像 -> Settings —> SSH keys —> Add SSH key。把公鑰粘貼到key中，填好title并點(diǎn)擊 Add key。
  3. git bash中輸入命令ssh -T git@github.com，選yes，等待片刻可看到成功提示。
  • 修改本地的ssh remote url，不用https協(xié)議，改用git協(xié)議
  1. Github倉庫中獲取ssh協(xié)議相應(yīng)的url
  2. 本地倉庫執(zhí)行命令git remote set-url origin SSH對應(yīng)的url，配置完后可用git remote -v查看結(jié)果

這樣git push或hexo d時(shí)不再需要輸入賬號密碼。

二、環(huán)境準(zhǔn)備

1. 安裝node.js

  • 下載源碼，官網(wǎng)下載地址 ，選擇source code下載即可，但是下載速度感人，這里貢獻(xiàn)一下我的 百度網(wǎng)盤nodejs

  • 環(huán)境配置

    將源碼解壓之后 mv 到/usr/local/node (經(jīng)過改名)，輸入gedit ~/.bashrc ，在最后兩行加上

    export NODE_HOME=/usr/local/node  # 你的node安裝目錄
export PATH=$PATH:$NODE_HOME/bin

  • 檢測

    在bash下輸入 source ~/.bashrc ，之后輸入 node -v ，如果顯示你的node 版本則表示安裝成功

2. 安裝 HEXO

命令：

npm install hexo-cli -g
npm install hexo --save

三、開始搭建

1. 建立 your_name.github.io 倉庫 和 blog倉庫

將your_name改成你的github賬號名字就行了

注：blog 是為了方便放博客

2. 博客初始化

  • 將 blog clone下來

    命令： git clone git@github.com:your_name/blog.git

  • cd 進(jìn)去之后，初始化

    hexo init
npm install
hexo g
hexo s

    在瀏覽器中打開http://localhost:4000/，你將會看到：

    hexo初體驗(yàn)

3. HEXO 詳解

1. 常用命令

  • hexo generate (hexo g) 生成靜態(tài)文件，會在當(dāng)前目錄下生成一個(gè)新的叫做public的文件夾

  • hexo server (hexo s) 啟動本地web服務(wù)，用于博客的預(yù)覽

  • hexo deploy (hexo d) 部署播客到遠(yuǎn)端（比如github等平臺）

  • hexo new (hexo n) 新建文章和頁面

    hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面

常用組合：

hexo d -g #生成部署
hexo s -g #生成預(yù)覽
2. 發(fā)文章

  • 直接創(chuàng)建

    在 source/_posts/下新建一個(gè).md文件，頭部加上類似以下內(nèi)容（格式）

    ---
title: hexo 建站指南
data: 2018-1-31 12:48:25
tags: 
  - hexo
categories: 
  - 其他
---

  • 命令方式

    命令： hexo new hello

    之后編輯 hello.md 即可

3. 新建標(biāo)簽頁面
  • 兩個(gè)確認(rèn)
  • 確認(rèn)站點(diǎn)配置文件有
tag_dir: tags
  • 確認(rèn)主題配置文件有
tags: tags

  • 新建tags頁面

    hexo new page tags

    此時(shí)會在source/下生成tags/index.md文件

  • 修改 source/tags/index.md
title: tags
date: 2018-1-31 16:49:50
type: "tags"        <!-- 必須 -->
comments: false     <!-- 必須 -->

這里 date 會自動生成

  • 在文章中添加tags

    在文章xx.md中添加：

    tags: 
  - Tag1
  - Tag2

    多個(gè)Tag可按上面的格式添加。

    其文件頭部類似：

    title: 
date: 2018-1-31 10:44:25
tags: 
  - Tag1
  - Tag2
4. 新建目錄頁面

  • 兩個(gè)確認(rèn)

    • 確認(rèn)站點(diǎn)配置文件打開了
    category_dir: categories
    • 確認(rèn)主題配置文件打開了
    categories: /categories

  • 新建categories文件

    hexo new page categories

    此時(shí)會在source目錄下生成categories/index.md文件

  • 修改categories/index.md

    title: categories
date: 2018-1-31 16:49:50
type: "categories"     <!-- 必須 -->
comments: false        <!-- 必須 -->

    這里 date 會自動生成

  • 在文章中添加categories

    在文章xx.md中添加：

    categories: 
  - cate

    其文件頭部類似：

    title: TagEditText
date: 2018-1-31 10:44:25
categories: 
  - cate
5. 添加about頁面

命令： hexo new page "about"

之后在\source\about\index.md目錄下會生成一個(gè)index.md文件，打開輸入個(gè)人信息即可

6. 添加搜索頁面

注明：此處以next主題為例

  • 命令：npm install hexo-generator-search --save

  • 在博客根目錄下的 _config.yml 中添加如下配置：

    search:
  path: search.xml
  field: all
    • path - file path. Default is search.xml .
    • field - the search scope you want to search, you can chose:
      • post (Default) - will only covers all the posts of your blog.
      • page - will only covers all the pages of your blog.
      • all - will covers all the posts and pages of your blog.

更多配置說明可到插件頁面查看：hexo-generator-search

  • 在 themes/next/layout/_partials/search 目錄下修改 localsearch.swig 文件

    原始文件內(nèi)容如下：

     <script type="text/javascript">
     var search_path = "<%= config.search.path %>";
     if (search_path.length == 0) {
      search_path = "search.xml";
     }
     var path = "<%= config.root %>" + search_path;
     searchFunc(path, 'local-search-input', 'local-search-result');
 </script>

    修改后的文件內(nèi)容為:

    <div class="popup">
 <span class="search-icon fa fa-search"></span>
 <input type="text" id="local-search-input" placeholder="search my blog...">
 <div id="local-search-result"></div>
 <span class="popup-btn-close">close</span>
</div>

    注：部分主題中此處已經(jīng)配置好了，無需更改

  • 效果演示

    主題： next

    [站外圖片上傳中...(image-38e6a4-1525880166286)]

    ? hexo-theme-next 本地搜索效果演示

4. 配置

1. 簡單配置

網(wǎng)站的設(shè)置大部分都在 _config.yml 文件中，詳細(xì)配置可以查看官方文檔

下面只列出簡單常用配置

  • title -> 網(wǎng)站標(biāo)題
  • subtitle -> 網(wǎng)站副標(biāo)題
  • description -> 網(wǎng)站描述
  • author -> 您的名字
  • language -> 網(wǎng)站使用的語言

注意：進(jìn)行配置時(shí)，需要在冒號:后加一個(gè)英文空格

2. deploy

輸入命令： npm install hexo-deployer-git --save

在博客根目錄下的_config.yml文件，末尾添加如下信息：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:your_name/your_name.github.io.git
  branch: master

然后執(zhí)行命令：

hexo g
hexo d

即可部署到github上

3. 添加評論功能

  • 注冊 Disqus 賬號

  • 配置 Disqus

    登錄后，點(diǎn)擊首頁的 GET STARTED 按鈕，之后選擇 I want to install Disqus on my site 選項(xiàng)，完成相關(guān)配置

    Websit Name 就是 short name 自己填寫，但是要求全網(wǎng)唯一，設(shè)定后不可改變，比如我的是 wangkunlin，這個(gè)在配置 Hexo 的時(shí)候需要用到
    Category 選擇種類，可以隨便選
    Language 語言選 Chinese 或者 English
    然后點(diǎn) Create Site 等待界面跳轉(zhuǎn)
    接下來在頁面的左側(cè)點(diǎn)擊 Configure Disqus

    ?

    在 Website URL 那里填寫自己的博客地址，Description 可以不寫，然后點(diǎn) Complete Setup，Disqus 基本的設(shè)置已經(jīng)完成

  • 配置 HEXO

    在博客根目錄下的_config.yml 中添加如下信息：

    Disqus
disqus:
  enable: true
  shortname: your_count
  count: true

  • 修改相應(yīng)文件

    進(jìn)入 theme 你的主題目錄，找到 comment.ejs，我的是在blog/themes/next/layout/_partials/comments.swig，不同主題請自行查找，替換為下面的內(nèi)容

    注：部分主題無需修改，已修改好

    <% if (page.comments){ %>
<section id="comment">
  <% if(config.disqus_shortname) { %>
  <div id="disqus_thread">
    <noscript>Please enable JavaScript to view the <a >comments powered by Disqus.</a></noscript>
  </div>
  <% } %>
</section>
<% } %>
5. 使用圖床

博客中的圖片文件可以直接放在source文件夾下，但是訪問速度較慢，把圖片放在國內(nèi)的圖床上是個(gè)更好的選擇。

這里選用: 七牛云存儲

免費(fèi)用戶實(shí)名審核之后，可以獲取10GB永久免費(fèi)存儲空間、每月10GB下載流量、每月10萬次Put請求、每月100萬次Get請求，做圖床綽綽有余。

注冊賬號，新建空間，我的新空間名是blog，專門用來放置博客上引用的資源。

進(jìn)入空間后點(diǎn)擊「內(nèi)容管理」，再點(diǎn)擊「上傳」：
[圖片上傳失敗...(image-864536-1525880166286)]

七?？臻g沒有文件夾的概念，但是允許為文件添加帶斜杠/的前綴，用來給資源分類。這里我設(shè)置前綴為img/Hexo 3.1.1 靜態(tài)博客搭建指南/。上傳了一張圖片：
[圖片上傳失敗...(image-f2ba2c-1525880166286)]

在右側(cè)可以找到外鏈，復(fù)制地址：
[圖片上傳失敗...(image-558e6-1525880166286)]

Markdown 插入圖片的語法為：

![](圖片網(wǎng)址)

上傳圖片 -> 獲取外鏈 -> 寫入Markdown，就這么簡單！

由于七牛防盜鏈的白名單無法添加localhost，暫時(shí)不設(shè)置防盜鏈，否則hexo s調(diào)試的時(shí)候，看不到圖片。

以上操作每插入一張圖片就要做一次，相當(dāng)繁瑣，于是寫了個(gè)腳本簡化，詳見這篇文章《拖曳文件上傳到七牛的Python腳本》

6. 更換主題

這里我選用了Next 主題，更多主題請前往 HEXO 官網(wǎng)

  • 安裝：在博客根目錄下執(zhí)行git clone https://github.com/iissnan/hexo-theme-next.git themes/next ，或者自行前往 github 上下載，然后mv至博客相關(guān)位置

  • 啟用：修改博客根目錄下的_config.yml配置文件中的theme屬性，將其設(shè)置為next

  • 修改 主題的_config.yml

    • 修改 scheme

      如：

      # Schemes
# scheme: Muse
scheme: Mist
# scheme: Pisces
# scheme: Gemini
7. 綁定獨(dú)立域名
  • 購買域名
  • 設(shè)置域名解析，添加一個(gè) CNAME記錄，指向你的github.io頁面
  • 在source目錄下，添加CNAME文件（沒有后綴）,在文件里面寫上你的域名（只能寫一個(gè)）
8. 設(shè)置閱讀全文

效果請看 tofar

  • 方法一：在文章中使用< !--more--> 手動進(jìn)行截?cái)?/p>

    這種方法可以根據(jù)文章的內(nèi)容，自己在合適的位置添加 < !--more--> 標(biāo)簽，使用靈活，也是Hexo推薦的方法。

  • 方法二：在文章中的front-matter中添加description

    提供文章摘錄這種方式只會在首頁列表中顯示文章的摘要內(nèi)容，進(jìn)入文章詳情后不會再顯示。

  • 自動形成摘要，在主題配置文件中添加

    1. 默認(rèn)截取的長度為 150 字符，可以根據(jù)需要自行設(shè)定
    auto_excerpt:
  enable: true
  length: 150
8. 字體配置

  • 修改字體大小

    文件位置：～blog/themes/next/source/css/_variables/base.styl

    font-size-base = 16px

  • 配置文件位置：blog/themes/next/source/css/_variables/base.styl

    // Font families.
$font-family-chinese      = -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "STHeiti", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", "Droid Sans Fallback", "Microsoft YaHei", source-han-sans-simplified-c
$font-family-base         = $font-family-chinese, sans-serif
$font-family-base         = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global')
$font-family-logo         = $font-family-base
$font-family-logo         = get_font_family('logo'), $font-family-base if get_font_family('logo')
$font-family-headings     = $font-family-base
$font-family-headings     = get_font_family('headings'), $font-family-base if get_font_family('headings')
$font-family-posts        = $font-family-base
$font-family-posts        = get_font_family('posts'), $font-family-base if get_font_family('posts')
$font-family-monospace    = $font-family-chinese, monospace
$font-family-monospace    = Menlo, Monaco, Consolas, get_font_family('codes'), $font-family-chinese, monospace if get_font_family('codes')

  • 主題配置文件：blog/themes/next/_config.yml

    font:
  enable: true
  # Uri of fonts host. E.g. //fonts.googleapis.com (Default)
  # 親測這個(gè)可用，如果不可用，自己搜索 [Google 字體 國內(nèi)鏡像]，找個(gè)能用的就行
  host: https://fonts.cat.net
  # Global font settings used on <body> element.
  global:
    # external: true will load this font family from host.
    external: true
    family: Lato
  # Font settings for Headlines (h1, h2, h3, h4, h5, h6)
  # Fallback to `global` font settings.
  headings:
    external: true
    family: Roboto Slab
  # Font settings for posts
  # Fallback to `global` font settings.
  posts:
    external: true
    family:
  # Font settings for Logo
  # Fallback to `global` font settings.
  # The `size` option use `px` as unit
  logo:
    external: true
    family:
    size:
  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: Roboto Mono
    size:

5. 更多配置

1. 更改上一篇，下一篇的順序

進(jìn)入一篇文章，在文章底部，有上下篇的鏈接（< >），但是點(diǎn) > 發(fā)現(xiàn)進(jìn)入的是頁面中的的上面那篇文章，與操作習(xí)慣不符，別扭。

我猜這是從時(shí)間角度設(shè)計(jì)的，> 英語叫 next ，而 next 是更新的。不過別扭就改成習(xí)慣的好了，從空間位置角度設(shè)計(jì)。1

方法就是修改文件：

注意下面文件中的加減

文件位置：~/blog/themes/next/layout/_macro/post.swig

{% if not is_index and (post.prev or post.next) %}
  <div class="post-nav">
    <div class="post-nav-next post-nav-item">
-      {% if post.next %}
+      {% if post.prev %}
-        <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
+        <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
-          <i class="fa fa-chevron-left"></i> {{ post.next.title }}
+          <i class="fa fa-chevron-left"></i> {{ post.prev.title }}
        </a>
      {% endif %}
    </div>

    <span class="post-nav-divider"></span>

    <div class="post-nav-prev post-nav-item">
-      {% if post.prev %}
+      {% if post.next %}
-        <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
+        <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
-          {{ post.prev.title }} <i class="fa fa-chevron-right"></i>
+          {{ post.next.title }} <i class="fa fa-chevron-right"></i>
        </a>
      {% endif %}
    </div>
  </div>
{% endif %}
2. 移動端顯示 back-to-top 按鈕和側(cè)欄

前提: 主題的設(shè)計(jì)模版是 Muse 或 Mist

文件位置：主題_config.yml

# Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: true
3. 側(cè)邊欄社交鏈接
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容