個人我的博客搭建之旅

引言

從2017年到如今，總共有兩次用Hexo來搭建我的博客。
訪問方子龍的博客:http://www.raysonblog.cn/

• 第一次：
  在2017年的時候，開始想着用Java幹它一個屬於本身的博客，固然不是立刻就開始幹，得網上查找資料啊！看看是否有現成的可以直接使用。在此過程當中，發現有不少的博客主題都基本上一致，並且還比較好看, 效果槓槓地。爲了知足好奇心，就看到網站下方有關於Hexo的字樣，就點進去看到了一下簡介，並且還有不少好看的主題，還能夠隨意配置本身喜歡的主題。頓時我就打消了要本身寫博客程序的念頭。有這麼好用的，固然是直接拿來即用。就這樣，一邊搭建一邊學習也就有了Hexo+Next主題的初版博客。

  遺憾的是，搭建成功之後，也沒有去管理，任它荒廢。
  

• 第二次：
  搭建過程耗時一個月左右的時間，抽空閒時間來作，相比第一次，此次的搭建過程耗時比較長，主要緣由是修改主題樣式，對主題代碼不熟悉。可是整體收穫仍是不少。效果樣式都還比較喜歡，蠻符合我內心的預期。

接下來，就談談如何搭建，以及一些思考。 具體詳細如何搭建也能夠百度。

一. 環境配置

【Nodejs】官網下載：https://nodejs.org/zh-cn/

【Git】官網下載：https://git-scm.com/

網上有不少相關的安裝使用教程，我這裏就很少餘的說。本身動手纔是硬道理。

二. Hexo的安裝與經常使用基本命令

基礎環境配置好之後，那麼接下來就能夠安裝生成靜態博客網站的關鍵--Hexo，其主要信息和安裝命令，主題等均可以經過官網輕鬆的瞭解：https://hexo.io/zh-cn/

爲了安裝Hexo，只須要在blog-hexo目錄中單擊右鍵啓動Git Bash Here，而後輸入命令：

npm install hexo-cli -g

網上有不少其餘的命令，建議一切以官網命令爲依據，因爲時間版本緣由，頗有可能將來的命令發生改變而失效。

而後等待幾分鐘（取決於你的網速），完成後。

在blog-Hexo目錄下執行以下命令進行初始化：

hexo init

而後就可使用Hexo三連擊，即咱們最經常使用的三個主要命令（依舊在上述Git Bash命令端口中）：

hexo clean # 清空已有hexo網站文件
hexo generate(or g) # 依據網頁文本與新的CSS樣式生成新網站文件
hexo server(or s) # 啓動本地服務器

能夠在localhost:4000查看網站修改效果 依次運行上述三個命令，就能夠在瀏覽器打開localhost:4000端口，查看對應網站界面效果。

通常默認的是一個landscape主題，後期當提交新文章或者新的樣式修改時，每每都是先從本地查看結果無誤後再部署到Github Pages。

Hexo deploy(or d) #提交代碼到Github上

三. Hexo主題下載與使用

主題官網瀏覽地址：https://hexo.io/themes/

在選擇主題的過程當中耗費了不少的時間和遇到了不少問題，其緣由就是主題功能不全以及選擇本身喜歡的風格致使的。最後推薦搭建使用hexo-theme-next主題，由於這個功能最全。

在這個過程當中,主題的許可能是要修改的。

• 菜單
• 版權
• gitHub banner
• 社交信息
• 頭像信息
• 閱讀時間統計
• 打賞設置
• 評論設置
• 百度統計
• leancloud訪問統計
• 不蒜子閱讀訪問統計
• 本地搜索
• SEO優化(必需要作，而後百度就搜不到你的博客)

四. 兩個重要的配置文件：Hexo的配置文件與主題的配置文件

4.1 Hexo配置文件

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 站點
title: 方子龍
subtitle:
description: 「方子龍」一天不碼字就剁手的程序猿。專一Java、Golang、Spring Boot/Spring Cloud等技術交流分享。
keywords: 方子龍,SpringBoot,SpringCloud,Java技術乾貨,程序猿,Golang
author: 方子龍
language:
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.raysonblog.cn
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
book_dir: books
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

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

主要修改3個地方：

• Site 站點信息配置
• URL 域名信息配置
• theme 主題配置
• Deploy 代碼託管提交配置

4.2 主題的配置文件

主題中的配置文件跟每一個主題有關，能夠本身嘗試修改，而後運行看效果。

五. 準備一個屬於本身的專屬域名

上面的博客只能在本地訪問，須要放到外網上去，還得將編譯好的靜態文件提交到代碼託管平臺，好比github, Gitee等，這些平臺都支持Pages服務。至於如何部署， 網上也能夠找到資料。購買了本身的域名，那配置也相對簡單。

六. 問題總結

1. GitHub Pages自定義域名後每次hexo d都會失效解決

只要在source 目錄添加一個新文件CNAME就好

CNAME –不帶任何後綴，這就是全稱，裏面寫的是你的域名

而後就ok了。

怎麼push都不用再去GitHub Pages設置了

2. 如何讓文章能被指定的layout樣式渲染

---
title: 關於我
layout: about #指定模板
---

3. 文件分類如何指定二級分類

---
title: 個人我的博客搭建之旅
date: 2019-6-27 16:50:32
author: 方子龍
original: true   # 自定義文章屬性 原創標識
tuijian: true    # 自定義文章屬性  推薦標識
categories: #分類
- 雜談     #一級分類
- 我的感想 # 二級分類
tags:
- 雜談
---

4. 文章如何自定義屬性以及模板如何取值

---
title: 個人我的博客搭建之旅
date: 2019-6-27 16:50:32
author: 方子龍 # 自定義文章屬性 做者
original: true   # 自定義文章屬性 原創標識
tuijian: true    # 自定義文章屬性  推薦標識
categories: #分類
- 雜談     #一級分類
- 我的感想 # 二級分類
tags:
- 雜談
---

在模板中取值：

post.author
post.original
post.tuijian

5. 如何獲取整個站點的文章

site.posts

6. 添加gitment評論 解決object ProgressEvent，漢化等問題

直接添加以下：

<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
<script src="https://billts.site/js/gitment.js"></script>

<div id="gitmentContainer"></div>
<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
<script src="https://billts.site/js/gitment.js"></script>
<script>
    var gitment = new Gitment({
        id: '<%= page.date %>',
        owner: '<%=theme.comment.gitment.github_user%>',
        repo: '<%=theme.comment.gitment.github_repo%>',
        oauth: {
            client_id: '<%=theme.comment.gitment.client_id%>',
            client_secret: '<%=theme.comment.gitment.client_secret%>',
        },
        cleanly: '<%=theme.comment.gitment.cleanly%>',
    });
    gitment.render('gitmentContainer');
    <%if(theme.comment.gitment.cleanly) {%>
        $('.gitment-container.gitment-footer-container').hide();
    <%}%>
</script>

試一試評論：https://www.raysonblog.cn/2019/06/27/my-first-blog/

七. 總結

在搭建博客以前，我就想過本身的博客要有「書單」，「工具」，「寫做&翻譯」等菜單，就都放置到了博客的菜單欄上，隨後又得考慮每個菜單頁的內容佈局要怎麼作。後來發現每個菜單的內容沒有好的佈局，老是零散的。因此我忍痛割愛，在沒有好的想法以前，就先隱藏掉。在修改主題的代碼過程當中，仍是頗有一點難度。不過慢慢地也就駕輕就熟了，知道怎麼修改主題裏的代碼。我老是愛折騰的，時間花的比較多，可是收穫老是不少。