豪橫！程式設計師搭建技術部落格，就只需一個GitHub賬號

程式設計師內點事發表於2020-04-04
程式設計師Github

引言

作為程式設計師擁有一個屬於自己的個人技術部落格，絕對是百利無一害的事，不僅方便出門裝b，面試時亮出部落格地址也會讓面試官對你的好感度倍增。經常能在很多大佬的技術文章的文末，看到這樣一句話： “歡迎大家訪問我的部落格”，每每看到這都會覺得好酷，同樣是搞技術為啥人家那麼優秀。而自己想要建一個部落格，要麼怕花錢，要麼怕過程太麻煩，最後就不了了之。

應粉絲要求，今天手把手，嘴對嘴（放心吧，我才不稀罕親你）的教大家搭建一個屬於自己的技術部落格，只要你有個github地址就行！還等啥呢？騷年，開整吧！

一、Hexo是個啥？

Hexo今天的主角，它是一款基於Node.js的靜態部落格（無需與後臺互動，全由靜態頁面組成）框架，依賴少易於安裝簡單，更主要的是它免費啊，而且可以輕鬆的將生成的靜態網頁託管在GitHub，碼雲和Coding上，搭建部落格首選框架之一。

二、準備工作

1、git安裝

git下載地址：gitforwindows.org

在這裡插入圖片描述
安裝完成後，檢查git是否安裝成功，如下顯示即為成功。

$ git --version
git version 2.12.2.windows.2
複製程式碼

注意： 這裡建議下邊使用的所有命令，均在git命令列中執行，cmd中執行命令容易出現錯誤。

2、node.js安裝

node.js 下載地址：https://nodejs.org/en/，選擇穩定版本即可，node.js的安裝非常簡單，一步一步next即可。

在這裡插入圖片描述
安裝完檢查node是否安裝成功，如下顯示即為成功。

$ node -v
v12.16.1
L8000100617811+51536@L8000100617811 MINGW64 /d/myblog
$ npm -v
6.13.4
複製程式碼

三、Hexo 本地搭建

在你自己覺得最可愛的磁碟裡，建一個資料夾專門用來存 myblog部落格相關的檔案。 資料夾內右鍵開啟 Git Bash Here，在此視窗內執行以下所有命令。

在這裡插入圖片描述

1、安裝 Hexo

用npm安裝hexo，由於國內網路高“牆”深院，避免安裝緩慢或失敗，這裡切換阿里的NPM映象，沒辦法只能採用迂迴戰術了。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
複製程式碼

用 cnpm 安裝 hexo

$ cnpm install -g hexo-cli
複製程式碼

安裝可能有一些緩慢，當然這還是取決於你的頻寬，這個過程中會出現的WARN提示不用理會。

$ cnpm install hexo --save
複製程式碼

到這hexo就安裝好了，檢查一下hexo -v是否安裝成功

$ hexo -v
hexo-cli: 3.1.0
os: Windows_NT 10.0.18362 win32 x64
node: 12.16.1
v8: 7.8.279.23-node.31
uv: 1.34.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.40.0
napi: 5
llhttp: 2.0.4
http_parser: 2.9.3
openssl: 1.1.1d
cldr: 35.1
icu: 64.2
tz: 2019c
unicode: 12.1

複製程式碼
2、初始化 Hexo

Hexo安裝完以後需要進行初始化操作。

 $ hexo init
複製程式碼

注意：這時需要在myblog檔案中，建立一個新的資料夾用來存放hexo部落格檔案。否則執行hexo init命令會報錯。

在這裡插入圖片描述
進入hexo檔案夾內右鍵開啟 Git Bash Here，在此視窗內執行後邊的所有命令。

$ hexo init
FATAL D:\myblog not empty, please run `hexo init` on an empty folder and then copy your files into it
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: target not empty
    at Context.initConsole (C:\Users\51536\AppData\Roaming\npm\node_modules\hexo-cli\lib\console\init.js:23:27)

複製程式碼

初始化成功後，hexo檔案夾內會出現如下的檔案：

node_modules: 依賴包 public：存放生成的頁面 scaffolds：生成文章的一些模板 source：用來存放你的文章 themes：放下下載的主題 _config.yml: 部落格的核心配置檔案（設定主體、標題等屬性）

在這裡插入圖片描述
接著需要執行一下cnpm install命令，要不下邊的啟動會提示命令不合法。

cnpm install
複製程式碼

最後用 hexo s -g 命令來啟動安裝好的 hexo。

$ hexo s -g
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
複製程式碼

直接訪問http://localhost:4000顯示如下頁面，本地部落格搭建成功。

在這裡插入圖片描述

四、Hexo 託管至 GitHub

1、建立GitHub倉庫

這時候需要我們在GitHub上建立一個倉庫，設定倉庫的名字以XXX.github.io結尾

在這裡插入圖片描述

2、配置_config.yml檔案

修改_config.yml檔案，新增你建立的GitHub倉庫地址

deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master
複製程式碼

安裝部署命令deploy-git ，這樣你才能用命令部署到GitHub。

$ cnpm install hexo-deployer-git  --save
複製程式碼

上邊修改完畢以後，依次執行以下命令，提交本地hexo檔案到GitHub。

hexo clean
hexo generate
hexo deploy
複製程式碼
3、線上測試

訪問剛建立的倉庫：https://chengxy-nds.github.io/，檔案推送至GitHub後頁面顯示會有一定的延遲，稍等幾十秒再次重新整理頁面，看到下邊這些頁面就表示部落格部署成功。

在這裡插入圖片描述

4、設定個人域名

現在我們的部落格地址：https://chengxy-nds.github.io/，但是看著是不是覺得有點low，如果有錢自己可以買一個域名。在雲平臺隨便買一個，看自己喜好，例如：chengxy.com。

將域名指向GitHub的伺服器地址， 192.30.252.153 和 192.30.252.154 。

進入存放部落格的GitHub倉庫，點選settings，設定Custom domain，輸入域名chengxy.com

在這裡插入圖片描述

然後在本地部落格檔案source中建立一個名為CNAME檔案，不要字尾。寫上你的域名。

在這裡插入圖片描述
最後重新編譯上傳檔案，訪問：chengxy.com即可。

hexo clean
hexo generate
hexo deploy
複製程式碼

五、Hexo主題切換

雖然我們的部落格搭建完成，但大家肯定也發現，現有的部落格樣式醜爆了，這時候就需要到官網挑一個自己喜歡的風格了。

1、下載主題

hexo主體官網：https://hexo.io/themes/，我們隨便找一個主題替換演示一下，主題都託管在github上，直接clone就好。

在這裡插入圖片描述

2、配置_config.yml

可以看到hexo 只有一個預設的主題theme，現在進入theme資料夾執行git克隆命令，或者直接下載一個主題放入theme資料夾內都可以。

git clone https://github.com/yelog/hexo-theme-3-hexo.git
複製程式碼

修改_config.yml檔案中的theme屬性

theme: hexo-theme-3-hexo
複製程式碼

打包上傳看看效果：

hexo clean
hexo generate
hexo deploy
複製程式碼
3、測試

nice！主題已經替換成功，是比自帶的好卡不少

在這裡插入圖片描述

六、Hexo基本操作

部落格搭建完，接下來就要開始寫部落格，管理部落格了~

建立我們的第一篇部落格，會在source\_posts目錄下生成一個程式設計師內點事的第一篇部落格.md檔案

hexo n 程式設計師內點事的第一篇部落格
複製程式碼
hexo基本配置

_config.yml是hexo框架最核心的檔案，部落格的配置基本在這裡。

#部落格名稱
title: 我的部落格
#副標題
subtitle: 一天進步一點
#簡介
description: 記錄生活點滴
#部落格作者
author: John Doe
#部落格語言
language: zh-CN
#時區
timezone:

#部落格地址,與申請的GitHub一致
url: http://elfwalk.github.io
root: /
#部落格連結格式
permalink: :year/:month/:day/:title/
permalink_defaults:

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

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: true
  tab_replace:

default_category: uncategorized
category_map:
tag_map:

#日期格式
date_format: YYYY-MM-DD
time_format: HH:mm:ss

#分頁，每頁文章數量
per_page: 10
pagination_dir: page

#部落格主題
theme: landscape

#釋出設定
deploy: 
  type: git
  #elfwalk改為你的github使用者名稱
  repository: https://github.com/elfwalk/elfwalk.github.io.git
  branch: master
複製程式碼

總結

至此，我們整個hexo部落格就搭建完了，其實還是比較簡單的，但到這裡我們萬里長征也只是走了第一步，後續還有更細緻的操作，例如：部落格建分類、標籤、佈局等，讓我們的部落格變得美美噠！

感興趣的小夥伴不妨關注一波呦！

小福利：

獲取到一些極客付費課程 ，噓~，免費 送給小夥伴們。關注公眾號回覆【極客】自行領取

豪橫！程式設計師搭建技術部落格，就只需一個GitHub賬號

相關文章