不可思議的hexo，五分鐘教你免費搭一個高逼格技術部落格
- 2020 年 4 月 4 日
- 筆記
引言
作為程式設計師擁有一個屬於自己的個人技術部落格，絕對是百利無一害的事，不僅方便出門裝b，面試時亮出部落格地址也會讓面試官對你的好感度倍增。經常能在很多大佬的技術文章的文末，看到這樣一句話： 「歡迎大家訪問我的部落格」，每每看到這都會覺得好酷，同樣是搞技術為啥人家那麼優秀。而自己想要建一個部落格，要麼怕花錢，要麼怕過程太麻煩，最後就不了了之。
應粉絲要求，今天手把手，嘴對嘴（放心吧，我才不稀罕親你）的教大家搭建一個屬於自己的技術部落格，只要你有個github地址就行！還等啥呢？騷年，開整吧！
一、Hexo是個啥？
Hexo今天的主角，它是一款基於Node.js的靜態部落格（無需與後台交互，全由靜態頁面組成）框架，依賴少易於安裝簡單，更主要的是它免費啊，而且可以輕鬆的將生成的靜態網頁託管在GitHub，碼雲和Coding上，搭建部落格首選框架之一。
二、準備工作
1、git安裝
git下載地址：https://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:Users51536AppDataRoamingnpmnode_moduleshexo-clilibconsoleinit.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部落格就搭建完了，其實還是比較簡單的，但到這裡我們萬里長征也只是走了第一步，後續還有更細緻的操作，例如：部落格建分類、標籤、布局等，讓我們的部落格變得美美噠！
感興趣的小夥伴不妨關注一波呦！
小福利：
獲取到一些極客付費課程 ，噓~，免費 送給小夥伴們。關注公眾號回復【極客】自行領取
