????加星標(biāo)，不迷路哦！

作為程序員擁有一個屬于自己的個人技術(shù)博客，絕對是百利無一害的事，不僅方便出門裝b，面試時亮出博客地址也會讓面試官對你的好感度倍增。經(jīng)常能在很多大佬的技術(shù)文章的文末，看到這樣一句話：“歡迎大家訪問我的博客”，每每看到這都會覺得好酷，同樣是搞技術(shù)為啥人家那么優(yōu)秀。而自己想要建一個博客，要么怕花錢，要么怕過程太麻煩，最后就不了了之。

應(yīng)粉絲要求，今天手把手的教大家搭建一個屬于自己的技術(shù)博客，只要你有個github地址就行！還等啥呢？騷年，開整吧！

一、Hexo是個啥？

Hexo今天的主角，它是一款基于Node.js的靜態(tài)博客（無需與后臺交互，全由靜態(tài)頁面組成）框架，依賴少易于安裝簡單，更主要的是它免費啊，而且可以輕松的將生成的靜態(tài)網(wǎng)頁托管在GitHub，碼云和Coding上，搭建博客首選框架之一。

二、準(zhǔn)備工作

1、git安裝

git下載地址：https://gitforwindows.org安裝完成后，檢查git是否安裝成功，如下顯示即為成功。

$?git?--version git?version?2.12.2.windows.2

注意： 這里建議下邊使用的所有命令，均在git命令行中執(zhí)行，cmd中執(zhí)行命令容易出現(xiàn)錯誤。

2、node.js安裝

node.js 下載地址：https://nodejs.org/en/，選擇穩(wěn)定版本即可，node.js的安裝非常簡單，一步一步next即可。安裝完檢查node是否安裝成功，如下顯示即為成功。

$?node?-v v12.16.1 L8000100617811+51536@L8000100617811?MINGW64?/d/myblog $?npm?-v 6.13.4

三、Hexo 本地搭建

在你自己覺得最可愛的磁盤里，建一個文件夾專門用來存 myblog博客相關(guān)的文件。 文件夾內(nèi)右鍵打開 Git Bash Here，在此窗口內(nèi)執(zhí)行以下所有命令。

1、安裝 Hexo

用npm安裝hexo，由于國內(nèi)網(wǎng)絡(luò)高“墻”深院，避免安裝緩慢或失敗，這里切換阿里的NPM鏡像，沒辦法只能采用迂回戰(zhàn)術(shù)了。

$?npm?install?-g?cnpm?--registry=https://registry.npm.taobao.org

用 cnpm 安裝 hexo

$?cnpm?install?-g?hexo-cli

安裝可能有一些緩慢，當(dāng)然這還是取決于你的帶寬，這個過程中會出現(xiàn)的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文件中，創(chuàng)建一個新的文件夾用來存放hexo博客文件。否則執(zhí)行hexo init命令會報錯。進入hexo文件夾內(nèi)右鍵打開 Git Bash Here，在此窗口內(nèi)執(zhí)行后邊的所有命令。

$?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?emptyat?Context.initConsole?(C:\Users\51536\AppData\Roaming\npm\node_modules\hexo-cli\lib\console\init.js:23:27)

初始化成功后，hexo文件夾內(nèi)會出現(xiàn)如下的文件：

node_modules: 依賴包public：存放生成的頁面scaffolds：生成文章的一些模板source：用來存放你的文章themes：放下下載的主題_config.yml: 博客的核心配置文件（設(shè)置主體、標(biāo)題等屬性）接著需要執(zhí)行一下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、創(chuàng)建GitHub倉庫

這時候需要我們在GitHub上創(chuàng)建一個倉庫，設(shè)置倉庫的名字以XXX.github.io結(jié)尾

2、配置_config.yml文件

修改_config.yml文件，添加你創(chuàng)建的GitHub倉庫地址

deploy:type:?gitrepo:?https://github.com/YourgithubName/YourgithubName.github.io.gitbranch:?master

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

$?cnpm?install?hexo-deployer-git??--save

上邊修改完畢以后，依次執(zhí)行以下命令，提交本地hexo文件到GitHub。

hexo?clean hexo?generate hexo?deploy

3、線上測試

訪問剛創(chuàng)建的倉庫：https://chengxy-nds.github.io/，文件推送至GitHub后頁面顯示會有一定的延遲，稍等幾十秒再次刷新頁面，看到下邊這些頁面就表示博客部署成功。

4、設(shè)置個人域名

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

將域名指向GitHub的服務(wù)器地址， 192.30.252.153 和 192.30.252.154 。

進入存放博客的GitHub倉庫，點擊settings，設(shè)置Custom domain，輸入域名chengxy.com

然后在本地博客文件source中創(chuàng)建一個名為CNAME文件，不要后綴。寫上你的域名。最后重新編譯上傳文件，訪問：chengxy.com即可。

hexo?clean hexo?generate hexo?deploy

五、Hexo主題切換

雖然我們的博客搭建完成，但大家肯定也發(fā)現(xiàn)，現(xiàn)有的博客樣式丑爆了，這時候就需要到官網(wǎng)挑一個自己喜歡的風(fēng)格了。

1、下載主題

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

2、配置_config.yml

可以看到hexo 只有一個默認的主題theme，現(xiàn)在進入theme文件夾執(zhí)行g(shù)it克隆命令，或者直接下載一個主題放入theme文件夾內(nèi)都可以。

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！主題已經(jīng)替換成功，是比自帶的好卡不少

六、Hexo基本操作

博客搭建完，接下來就要開始寫博客，管理博客了~

創(chuàng)建我們的第一篇博客，會在source\_posts目錄下生成一個程序員內(nèi)點事的第一篇博客.md文件

hexo?n?程序員內(nèi)點事的第一篇博客

hexo基本配置

_config.yml是hexo框架最核心的文件，博客的配置基本在這里。

#博客名稱 title:?我的博客 #副標(biāo)題 subtitle:?一天進步一點 #簡介 description:?記錄生活點滴 #博客作者 author:?John?Doe #博客語言 language:?zh-CN #時區(qū) 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:?trueline_number:?trueauto_detect:?truetab_replace:default_category:?uncategorized category_map: tag_map:#日期格式 date_format:?YYYY-MM-DD time_format:?HH:mm:ss#分頁，每頁文章數(shù)量 per_page:?10 pagination_dir:?page#博客主題 theme:?landscape#發(fā)布設(shè)置 deploy:?type:?git#elfwalk改為你的github用戶名repository:?https://github.com/elfwalk/elfwalk.github.io.gitbranch:?master

總結(jié)

至此，我們整個hexo博客就搭建完了，其實還是比較簡單的，但到這里我們?nèi)f里長征也只是走了第一步，后續(xù)還有更細致的操作，例如：博客建分類、標(biāo)簽、布局等，讓我們的博客變得美美噠！

? ???精 彩 文 章?

• 再見，Eclipse...

• 安利！阿里程序員常用的 15 款開發(fā)者工具

• 真香！微軟將為Edge瀏覽器帶來超好用的全新側(cè)邊搜索功能：無需跳轉(zhuǎn)網(wǎng)頁

END 最后昨天的送書結(jié)果出來啦，從視頻號關(guān)注列表里隨機抽取了一個幸運讀者，見圖片中的小伙伴，請24小時內(nèi)聯(lián)系小詹（xiaozhan_god）領(lǐng)獎哦！抽獎方式簡單粗暴，是Python在關(guān)注總數(shù)范圍內(nèi)生成隨機數(shù)的抽獎方式！另外，歡迎你關(guān)注我的視頻號！

總結(jié)

以上是生活随笔為你收集整理的豪横！程序员搭个人博客，一个 GitHub 账号足矣！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。