用 GitHub + Hexo 建立你的第一個博客

2021-02-13 Crossin的編程教室

作為一個程式設計師，擁有一個自己的博客，平時記錄一下，分享點技術文章，是很有必要的。建立博客的通常渠道包括：

在博客平臺上註冊，比如 博客園、CSDN、新浪博客 等。

利用博客框架搭建，如 WordPress、Jekyll、hexo 等。

自己用代碼寫一個。

其中，第一種最簡單，也最受限，說不定還會被刪帖刪號。第二種稍複雜，另外需要自己找部署的伺服器，但可定製化較高，是很多程式設計師的選擇。最後一種，是在重複造輪子，不過從另一個方面來看，倒是鍛鍊編程能力的好方式。

下面我們就來看下第二種搭建博客的方式。由於內容較多，會分為幾篇內容，今天是第一篇：

github＋hexo 建立你的第一個博客

部署博客及更新博文

安裝自己喜歡的主題

購買並綁定域名

安裝多說評論框

感謝本文作者 大懶蟲 同學的投稿。



前言

其實呢，建立博客是非常簡單的（哈哈，不管什麼東西，你會的就覺得簡單，不會的怎樣都難），我來給大家說說如何使用 GitHubPages 和 Hexo 建立自己的博客。

這個有一點難度，但是不要怕，我會一步一步的給大家完成指導的，如果有任何問題也可以隨時聯繫我，我會盡力給大家解決的！

下面先介紹為何選擇 GitHubPages 和 Hexo 來搭建博客，然後介紹搭建博客的詳細過程。

Why GitHub Pages and Hexo

因為 GitHub 的存在，我們得以簡單快速地搭建個人博客。

GitHub

GitHub，是一個代碼託管網站和社交編程網站。這裡聚集了世界上各路技術牛叉的大牛，和最優秀的代碼庫。把你的博客託管在這裡，還有什麼不放心的呢O(∩_∩)O。


GitHub Pages
GitHub Pages，是用來託管 GitHub 上靜態網頁的免費站點，那 GitHub Pages具體有哪些功能呢：

HEXO

Hexo 是一個簡單、快速、強大的靜態博客框架,出自臺灣大學生 tommy351 之手。我也看過使用 Jekyll、Octopress 搭建個人博客的過程，確實要繁瑣許多。相比之下 Hexo 更輕便更快捷，下面是其官網強調的四大特點：

極速生成靜態頁面

一鍵部署博客

豐富的插件支持

支持 Markdown

相信大家對 GitHub Pages 和 Hexo 有了一定的了解，下面進入正題。

使用 GitHub Pages 建立博客站點

註冊 GitHub

訪問 GitHub，註冊十分簡單，一定要記住註冊時使用的郵箱，因為 GitHub 上很多通知都是通過郵箱的。如下圖所示：

申請成功後，在 GitHub 官網上登錄，並驗證郵箱即可。

在 GitHub 上建立倉庫

與 GitHub 建立好連接之後，就可以方便的使用它提供的 Pages 服務，GitHub Pages 分兩種，一種是用你的 GitHub 用戶名建立的 username.github.io 這樣的用戶&組織站點，另一種是依附項目的 Pages。

想建立個人博客是用的第一種，形如 username.github.io 這樣的可訪問的站點，每個用戶名下面只能建立一個。如下圖所示：

關於 Github 的使用，我的老師 Crossin先生 也寫了一篇通俗易懂的教程，大家可以去看看 極簡 Github 上手教程

搭建環境安裝軟體Node.js

https://nodejs.org/en/

下載完成後根據提示一步一步安裝就好，這個沒有什麼需要特別說明的。

GitHub for Windows

https://desktop.github.com/

這裡有一點說明，下載這個 github 時因為是先從官網下載下來了一個下載器，然後再在本地下載，因為是外網，可能有點卡，所以下載好了全部並整理好了離線版本，你下載這個直接就自動安裝了：

github離線版

http://pan.baidu.com/s/1bZthpW 密碼：olr2

下載並安裝下面兩個軟體，一直點擊下一步即可：

使用 GitHub for Windows 登錄 GitHub




配置 SSH

我們如何讓本地 git 項目與遠程的 GitHub 建立聯繫呢？方法是用 SSH。打開命令行，輸入以下命令：

ssh -T git@github.com

如圖：

如果是下面之類的反饋（或者顯示 Hi xxx）：

The authenticity of host 'github.com (207.97.227.239)' can't be established. RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. Are you sure you want to continue connecting (yes/no)?

不用緊張，輸入 yes 之後,看到下圖的結果，就配置成功了：

使用 Hexo 創建博客框架Hexo 安裝

打開命令行，依次輸入以下命令：

cd /
npm install hexo-cli -g

如圖：


提示：cd / 作用是返回根目錄，Git Shell 默認裝在 C 盤，啟動時默認路徑為 C:\Users\xxx(用戶名)\Documents\GitHub，輸入 cd / 命令後就返回到了 C 盤根目錄下，需不需要使用 cd / 看個人習慣（下同）

Hexo 部署

Hexo 的部署可採用如下方法，輸入命令：

hexo init [文件名]。

打開控制臺，依次輸入以下命令：

cd /
hexo init Hexo

回車後出現該提示則表示正確：

部署成功之後，Hexo 會自動在目標文件夾建立博客網站所需要的所有文件。此時可以通過輸入以下命令在本地進行預覽（在剛才創建的文件夾裡）：

hexo generate 
hexo server

系統可能會出現提示，請點擊允許。如下圖所示則表示正確：

此時打開瀏覽器，在瀏覽器地址欄輸入 http://localhost:4000/ （默認埠為4000）, 便可以看到最原始的博客了。以後發表博文想先預覽，也可以通過 hexo server 在本地先跑起來，看看效果。

效果如下圖所示：

恭喜，到目前為止個人博客的雛形已經有了。
在 Git Shell 中按 Ctrl + C 並輸入 y 可以停止該服務。

近期文章推薦閱讀：

想用 Python 做數據分析？先玩玩這個再說

用 Python 實現你的量化交易策略

極簡 Github 上手教程

如何在 Python 中使用斷點調試

Python爬蟲：一些常用的爬蟲技巧總結

Python 抓取網頁亂碼原因分析

一些常見的新手問題

如何直觀地理解程序的運行過程？

Crossin的編程教室

微信ID：crossincode

論壇：http://bbs.crossincode.com

QQ群：498545096

點擊左下角「閱讀原文」，查看更多學習資源

相關焦點

  • Hexo+Github/Gitee 搭建個人博客
    個人博客的好處是你可以隨便折騰，沒有太多限制。GitHub Pages在 GitHub 新建一個名稱為 {username}.github.io的倉庫，username是你的github用戶名初始化項目創建項目先cd 進入你要創建博客項目的目錄下：hexo init {name}name為博客項目名，注意如果使用Gitee Pages部署服務，創建的倉庫名和這裡初始化的博客項目名相同。
  • 使用Hexo+Github搭建個人博客網站
    創建Github倉庫在Github中新建一個名為username.github.io的空倉庫，其中username是你在GitHub上的用戶名，比如筆者的倉庫名為percent.github.io。配置SSH如果想要使用遠程從你的電腦上傳文件至你的github倉庫，那麼，你就需要配置SSH。
  • 如何用 GitHub 從零開始搭建一個博客?
    作為目前全球最大的程式設計師社區，GitHub 能做的可不僅僅是託管源碼這一操作，你還可以使用 GitHub 的 Pages 功能來搭建一個屬於自己的博客，在上面寫文章，開評論，跟讀者互動，隨意更換博客主題，只要你想折騰，這些都能輕鬆做到。今天跟大家分享一篇文章，教你如何一步步使用 GitHub 搭建出個人博客。
  • Hexo博客寫作與圖片處理的經驗
    Hexo是一款非常優秀的開源博客管理工具，所有的博客文檔都通過Markdown格式編寫，Markdown編輯器有很多，原來的時候我經常用Evernote編寫，但是Evernote寫Markdown經常會出現輸入法響應緩慢的情況。最近我從Evernote轉到了Typora，想到哪裡就能夠敲字寫到哪裡，而且輸入後馬上就能夠轉換為友好的顯示樣式，體驗非常好。
  • 如何用 GitHub 從零開始搭建一個博客 ?
    今天周末就跟大家分享一篇文章，細節滿分，教你如何一步步使用 GitHub 搭建出個人博客。按照步驟一步步操作下去，你肯定能擁有一個自己的博客，Let's go !準備條件在這裡先跟大家說一些準備條件，有些同學可能一聽到搭建博客就望而卻步。弄個博客網站，不得有臺伺服器嗎？不得搞資料庫嗎？不得註冊域名嗎？
  • 如何擁有個人的Github技術博客
    題圖：87testing.com前不久用wordpress搭建了一個博客，用起來感覺不是太好用，並且資料庫經常會發生異常掛掉
  • iOS14搭配快捷指令在手機上寫hexo博客
    這次研究的課題是用iOS快捷指令通過ssh執行遠程伺服器上的操作，如果你沒有伺服器也沒有iOS設備，那麼你可以圖一樂
  • 個人博客|第一章|手把手教你搭建、上線個人博客
    」前言Hello，我是淡漠，今天帶大家一起搭建個人博客。個人博客一直都是非常受歡迎的個人項目，個人博客分靜態和動態兩種，淡漠個人比較青睞靜態博客，靜態不需要管理後端，相比動態博客，靜態博客可以不需要花一分錢，開發成本要低一些，畢竟作為學生黨，買伺服器放一個博客網站有點浪費，也可以把精力集中於寫博客，而不是開發博客。
  • 如何搭建一個比簡書更精美的個人博客
    幸好我們生存在一個開源的時代，今天小編就用hexo，帶你搭建一個比簡書更精美的個人博客。但人各有所愛，並不應該強迫大家都用相同的主題，因此我們要挑選主題。只要把hexo部署到雲伺服器再配置一個域名就萬事大吉了。二、部署然而，大多數想嘗鮮的人並不想如此破費。我們也還需要其他方案——利用github來建立自己的主頁。
  • 現在還有1%的程式設計師不會搭建博客,是你嗎?
    在 2020 年如果還沒有自己的技術博客確實有點落伍了，但是搭建自己的技術博客有很多種技術方案，我知道的有  Hexo, jeklly, vuepress  等。寵粉無邊，所以儘量所有的技術方案都手把手教大家一輪，讓大家都有自己的個人博客。
  • 零代碼教你用 GitHub 搭建個人博客!
    轉自量子位，作者賴可GitHub 不僅可以傳代碼，還可以建博客。利用 GitHub Pages 平臺，就可以搭建非常好用的個人博客。但是難點在於，你在要敲很多代碼才能搭出一個博客。對於小白和新手來說，太不友好。沒關係！現在不用寫代碼也可以了。不需要敲碼，不用寫使用命令行，可以自定義主題，還能有自己的域名。
  • 「教程篇」Hexo+ NexT 博客美化配置教程|第七篇
    該功能由 theme-next-canvas-nest 插件提供，在根目錄下執行如下命令：git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest
  • 為什麼我建議你去寫博客?
    我是一個文筆很差的人，高考語文也是勉強及格，所以如果一開始你告訴我，我的文字將會對我產生很大的影響，我肯定是不相信的。直到後來本科學了軟體工程之後，想著要整理一些自己的學習筆記，但是代碼也不方便用紙記下來，這便開始有了用電腦做筆記的想法。
  • 女朋友看了我的博客,說太LOW了,於是我折騰了一天~
    NEXT這款主題源碼都直接託管在GitHub上，可以直接搜索，下載地址：https://github.com/theme-next/hexo-theme-next.git。下載源碼之後，直接解壓到博客的themes的目錄下，比如我的主題目錄就是G:\hexo\themes\next。
  • 一行代碼不用寫:GitHub博客小白版入門教程
    利用GitHub Pages平臺，就可以搭建非常好用的個人博客。但是難點在於，你在要敲很多代碼才能搭出一個博客。對於小白和新手來說，太不友好。沒關係！現在不用寫代碼也可以了。不需要敲碼，不用寫使用命令行，可以自定義主題，還能有自己的域名。Fast.ai提供了模版，只要註冊一個github帳號，小白就能夠完成搭建博客的操作。
  • 一杯茶的時間,上手 Gatsby 搭建個人博客
    如果是新的博客這個問題不大，如果是遷移過來的，有兩個解決方式，第一個是手動寫個腳本給文章都補上域，另一個是利用 Gatsby 的 Node APIs 在 fields 上生成特定域，魯棒性更好些。首先是普通的文章頁面生成，這個是在 createPages 鉤子中，如果你的博客只有文章用到 Markdown 的話，可以在 GraphQL 查詢中直接過濾，否則我們用前面文章的方法，先取所有 Markdown 文件再根據渲染的模板來分別處理各種類型的文章。
  • Hexo-miccall主題及html5up站點推薦
    首先向大大家推薦hexo的miccall主題。演示地址：miccall.tech作者：王金錚作者暱稱：miccall頁面效果如下：整體樣式比較符合心中的展示站點，嗯嗯，很不錯。去其github後才知道主題的模板頁面來自html5up，發現這個html5網站也不錯，推薦給大家。
  • 我的博客變遷史
    但隨著時間的推移，我越發的發現Hexo 及其所圍繞的生態開始不斷的進行破壞性的更改：gulp 的打包腳本已經無法順利執行，breaking changes 的修復需要重新熟悉 gulp 的工作機制並重寫打包腳本無法將博客順利的升級到 Hexo 5.0 之後的版本所依賴的主題 hexo-theme-next 的源倉庫早已停止維護自己定製的版本 changkun/hexo-theme-next
  • 為什麼建立 WordPress 個人博客?
    有人問我為什麼建立 WordPress 個人博客，當初的目的是什麼？