2. 程式人生 > >我的個人部落格搭建之旅

我的個人部落格搭建之旅

阿新 • • 發佈：2019-06-28

引言

從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: [email protected]: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/

七. 總結

在搭建部落格之前，我就想過自己的部落格要有“書單”，“工具”，“寫作&翻譯”等選單，就都放置到了部落格的選單欄上，隨後又得考慮每一個選單頁的內容佈局要怎麼做。後來發現每一個選單的內容沒有好的佈局，總是零散的。所以我忍痛割愛，在沒有好的想法之前，就先隱藏掉。在修改主題的程式碼過程中，還是很有一點難度。不過慢慢地也就得心應手了，知道怎麼修改主題裡的程式碼。我總是愛折騰的，時間花的比較多，但是收穫總是很多

相關推薦

我的個人部落格搭建之旅

引言 從2017年到現在，總共有兩次用Hexo來搭建個人部落格。 訪問方子龍的部落格:http://www.raysonblog.cn/ 第一次： 在2017年的時候，開始想著用Java幹它一個屬於自己的部落格，當然不是馬上就開始幹，得網上查詢資料啊！看看是否有現成的能夠直接使用。在此過程中，發現有很多的部

我的 K8S 架構搭建 之旅

實現 erro eat href mbed and client clust 操作 一、總體框架圖：Master組件：nkube-apiserverKubernetes API，集群的統一入口，各組件協調者，以HTTP API提供接口服務，所有對象資源的增刪改查和監聽操作都

Hexo部落格搭建之在文章中插入圖片

在寫文章時，常常有配圖說明的需求。Hexo有多種圖片插入方式，可以將圖片存放在本地引用或者將圖片放在CDN上引用。 本地引用 絕對路徑 當Hexo專案中只用到少量圖片時，可以將圖片統一放在source/images資料夾中，通過markdown語法訪問它們。 ![](/ima

Django個人部落格開發之網站釋出

Python環境部署 我們今天學習如何將Django部落格專案部署到Linux伺服器上，我們此次選擇Linux的系統是centos7，如何安裝centos7我就不在這裡進行演示了，如果不會的請自行百度如何安裝centos7。映象下載地址：https://www.centos.org/down

Django個人部落格開發之高階優化表單、模型

表單自定義校驗 之前的學習過程當中講解了form表單的定義，首先，我們來回顧一下form表單的定義和使用的流程 以文章的評論為案例。 1、定義form.py檔案，在form檔案當中定義表單校驗類 2、在檢視當中呼叫form表單類 3、前端渲染表單類 總的看起來，學習的過程當中要注意以下幾點

Django個人部落格開發之高階優化路由、檢視

我們之前已經完成了專案的結構搭建，但是，在Django當中，我們強調的一個重要概念是app，比如Django自帶的admin就是一個成功的app典範，那麼我們應該如何整理自己的專案結構，才能讓我們的app真正的獨立出來，我們以之前的OurBlog專案為例： 為了專案的可遷移性，我們將靜態檔案

Django個人部落格開發之分頁與Vue分頁

分頁介紹與邏輯 由於當前開發的需求當中各種管理平臺的增多，各種各樣的列表需求逐漸增多，而往往資料量有很多，很難實現也沒有必要將所有的資料都羅列到一個前端頁面上，使用者用不到，也很浪費資源。所以我們有了分頁的需求，將資料分頁顯示。 現在有1000條文章的資料需要展示在我們的計算機上。 1. 可以將

Django個人部落格開發之資料建模與樣式設定

1. 開發流程 學習這個之前你得需要一定的Django基礎，這個Django部落格專案也是對你得Django基礎的一定檢驗和總結。同時來一次完整的Django開發體驗，接下來看看我們整個開發需要經過哪些流程，大致分為這幾個方面： 2. 部落格開發需求分析與建模 需求分析 本次專

使用Hugo將個人部落格搭建到Github上

剛開始搭建完大概長這樣 話不多說，現在開始搭建 安裝Hugo 在Hugo裡找到對應版本下載安裝，我的主機是deepin，選擇Linux64位的dep包 檢視版本資訊，顯示以下即安裝成功： $ hugo version Hugo Static Site Generator

Hexo 個人部落格搭建

老早就想搭建一個屬於自己的個人部落格了，之前也弄過一個，後臺到前端完全原生自主編寫，可是終究還是太年輕，很多東西都不會，也不懂得堅持，慢慢就荒廢了。加上幾次的伺服器變更，再加上工作沒精力打理，之前的個人部落格已經完全荒廢了。經過2018年一年時間的沉澱，決定再次搭建一個屬於自己的部落格了，之前一直在 部落格園

零基礎小白白30分鐘個人部落格搭建，簡單易學

這個部落格搭建是我一早上學的，非常簡單，比起我之前找的，看個視訊能把人看暈，就是看完了還是不能獨立做出來相信你會更快，最快10分鐘搭建完，學習的連結在這裡，按部就班的來就可以了，不需要任何基礎， https://junyanzhang.github.io/2017/02/06/%E5%BF%AB

我的個人部落格之旅：從jekyll到hexo

前言   喜歡寫Blog的人，會經歷三個階段。 第一階段，剛接觸Blog，覺得很新鮮，試著選擇一個免費空間來寫。 第二階段，發現免費空間限制太多，就自己購買域名和空間，搭建獨立部落格。 第三階段，覺得獨立部落格的管理太麻煩，最好在保留控制

docker實戰之使用mysql映象與wordpress映象搭建個人部落格

這次我打算寫一個實戰教程，以前寫的教程大多數是根據自己掌握的知識去寫的，並非實戰，這次試一下吧 首先docker這個東西我強烈推薦學習，因為真的很好用 下面先開始吧，廢話不多說，基礎的連線伺服器這些我就不囉嗦了，自個去百度吧，貌似我部落格也有 首先，使用yum安裝docker，命令如下

Linux從0到1之搭建個人部落格系統wordpress

一、搭建系統環境 LAMP指的是Linux，apache，MySQL，php組成的網站系統，這是搭建網站最簡單快速的組合 1. 基礎環境（防火牆） 剛部署好的linux伺服器預設開啟了防火牆，假如你在該伺服器裝一個HTTP並啟動，在別的機器訪問該HTTP是不成功的

搭建個人部落格之 Github + hexo： 如何在其他電腦上更新部落格

歡迎點選參觀我的 ——> 個人學習網站 首先將原來電腦上的Hexo目錄下的這幾個檔案複製到新電腦的新建Hexo目錄下 _config.yml package.json

Hexo + Github 之搭建個人部落格

什麼是 Hexo？ Hexo 是一個快速、簡潔且高效的部落格框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。hexo中文官網地址 https://hexo.io/zh-cn/ Git安裝 nodeJ

我的Android進階之旅：經典的大牛部落格推薦

Docker最全教程之使用PHP搭建個人部落格站點（二十二）

目錄 官方映象  編寫簡單的Hello world！ 1. 編寫Hello world!  2. 編寫Dockerfile  3. 構建並執行  4. 直接使用PHP Docker映象執行PHP指令碼  構建自己的

基於Github Pages + docsify，我花了半天就搭建好了個人部落格

目錄 前言 一些說明 準備工作 上docsify官網看一看 使用docsify命令生成文件站點 部署到Github上 寫在最後 前

Debian 8.9 搭建wordpress個人部落格

想自己搭個部落格玩玩，就搭建了此部落格，過程可謂艱辛啊！ 先在阿里雲買了個  輕量應用伺服器 1個月10塊錢，好貴。。。。 用 windows sever 下載不了phpstudy，也不知道怎麼回事。。。應該是我的問題。所以就得用純命令列的 Debian    也是