Github Blog

2019-04-20

Mars Hung

web

文章閱讀量次

一、說明

利用Hexo+Github建立前端型Blog

二、安裝

1.依賴

Hexo
- nodejs
GitHub Pages(github.io)

2.安裝環境

下載並安裝 Git
安裝 Node.js

參考：Node.js 安裝配置

3.初始化工作目錄

4.安裝Hexo

Git bash中，透過 npm 即可完成 Hexo 的安裝。

1	$ npm install -g hexo-cli

5.初始化Hexo

一旦 Hexo 完成後，請執行下列指令，Hexo 會在指定資料夾中建立所有您需要的檔案。

1
2
3

$ hexo init blog-src
$ cd blog-src
$ npm install

6.設定Hexo

網站配置檔案，您可以在此配置大部分的設定。

title: Mars's Blog
subtitle: Mars's learning record
description: Record Mars's learning experiences and experiences
author: Mars Hung
url: https://marshung24.github.io
new_post_name: :year-:month-:day-:title.md # File name of new posts
post_asset_folder: true
theme: bootstrap-blog
deploy:
  type: git
  repo: git@github.com:marshung24/marshung24.github.io.git

deploy git 需設定global git上傳ssh key資料

7.安裝測試伺服器

1	$ npm install hexo-server --save

8.下載主題

1	$ git clone https://github.com/cgmartin/hexo-theme-bootstrap-blog.git themes/bootstrap-blog

9.修改主題設定

# File: themes/bootstrap-blog/_config.yml

# Header
navbar_brand: false
menu:
  Home: index.html
  Archives: archives/
  GitHub: https://github.com/marshung24

# Content
excerpt_link: Read More
fancybox: false

# Sidebar
widgets:
- recent_posts
- archive
- category
- tag

# widget behavior
archive_type: 'monthly'
show_count: true

# visitors count
counter: true

訪問計數

# File: themes/bootstrap-blog/layout/_partial/footer.ejs

<% if (theme.counter) { %>
  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  <span id="busuanzi_container_site_pv">總訪問量<span id="busuanzi_value_site_pv"></span>次</span>
  <span class="post-meta-divider">|</span>
  <span id="busuanzi_container_site_uv">訪客數<span id="busuanzi_value_site_uv"></span>人</span>
<% } %>

三、指令

1.建立新文件

1	$ hexo new [layout] <title>

2.產生靜態檔案

1	hexo generate

3.清除快取

清除快取檔案 (db.json) 和已產生的靜態檔案 (public)。

1	$ hexo clean

4.啟動伺服器

1	hexo server -p 80

5.查看結果

前往 http://localhost 查看建構後的結果

6.部署網站

上傳至Github

1	$ hexo deploy -g

四、其他應用

添加文章目錄

添加toc.ejs文件

在主題目錄下layout/_partial文件夾中新建toc.ejs文件，存放文章目錄的代碼。
1
2
3
4
5
<% if (post.toc != false) { %>
<div id="toc">
<%- toc(post.content, {list_number: false}) %>
</div>
<% } %>
這裡的toc()函數就是Hexo官方提供的輔助函數

添加到頁面中

主題目錄文章佈局文件layout/_partial/article.ejs，尋找代碼：

1	<%- post.content %>

在前面添加了一行 <%- partial(‘toc’) %> 引用了目錄代碼，變成：

1 2	<%- partial('toc') %> <%- post.content %>

隱藏ol li前方數字

在source/css/custom.css增加樣式：

1
2
3

#toc ol li{ 
  list-style-type:none; 
}

錄自「HEXO小書-添加文章目錄」

Mars's Blog