途牛原創 如何使用 hexo+github 搭建個人博客

2021-12-31 途牛技術中心


前段時間,在一次分享會上發現,很多人不知道 github 的一個強大功能 —— GitHub Pages,今天就介紹下。如果你不想要像新浪、csdn 這類樣式醜、頁面內容雜的博客網站,或者不想在移植、遷移上浪費精力,又或者不想付出多餘的銀子買VPS,那麼 GitHub Pages 是不錯的選擇。

GitHub Pages 有以下幾個優點:

輕量級的博客系統,沒有麻煩的配置

免費空間,享受 Git 版本管理功能

使用標記語言,比如 Markdown

無需自己搭建伺服器

可以綁定自己的域名

當然他也有缺點:

搭配模板系統,相當於靜態頁發布,每運行生成一次都必須遍歷全部的文本文件,網站越大,生成時間越長

動態程序的部分相當局限,比如沒有評論,不過有解決方案

基於 Git,很多東西需要定製,不像 Wordpress 有強大的後臺

要想搭建漂亮的 blog,還需要模板系統,官方推薦的是 jekyll,但是配置稍複雜,今天推薦另一個選擇 —— hexo,一個簡單地、輕量地、基於 Node 的一個靜態博客框架。

下面介紹下如何使用 hexo 和 github pages 搭建個人博客。

準備工作

注意: 本文針對 Windows 平臺和 Hexo 3.1.1

安裝 github windows

主要使用 git bash,如果對 git 命令不熟悉的也可以使用 git 客戶端進行某些操作

github windows

安裝 node.js

因為要使用 npm,比較簡單的方法就是安裝 node.js

node.js

安裝完成後添加 Path 環境變量,使 npm 命令生效

;C:\Program Files\nodejs\node_modules\npm

創建 Github Pages

沒有 github 帳號的話,需要註冊一個,不贅述

然後創建一個倉庫,名字是[yourGithubAccount].github.io

配置 ssh key

使用 git bash 生成 public ssh key,以下是最簡單的方法

$ ssh-keygen -t rsa

C/Documents and Settings/username/.ssh 目錄下會生成 id_rsa.pub

將 id_rsa.pub 的內容完全複製到 github Account Setting 裡的 ssh key 裡即可

測試

$ ssh -T git@github.com

然後會看到

Hi [yourGithubAccount]! You've successfully authenticated, but GitHub does not provide shell access.

設置用戶信息

$ git config --global user.name "[yourName]"//用戶名$ git config --global user.email  "[yourEmail]"//填寫自己的郵箱

經過以上步驟,本機已成功連接到 github,為部署打下基礎。

配置 hexo本地 clone

創建本地目錄,然後使用 git bash 或者客戶端 clone 之前創建的倉庫([yourGithubAccount].github.io)

安裝、配置 hexo

進入倉庫目錄,使用 git bash 安裝配置 hexo

$ npm install -g hexo-cli$ npm install hexo --save$ hexo init

安裝 hexo 插件

npm install hexo-generator-index --savenpm install hexo-generator-archive --savenpm install hexo-generator-category --savenpm install hexo-generator-tag --savenpm install hexo-server --savenpm install hexo-deployer-git --savenpm install hexo-deployer-heroku --savenpm install hexo-deployer-rsync --savenpm install hexo-deployer-openshift --savenpm install hexo-renderer-marked@0.2 --savenpm install hexo-renderer-stylus@0.2 --savenpm install hexo-generator-feed@1 --savenpm install hexo-generator-sitemap@1 --save

安裝 ejs,否則無法解析模板

$ npm install

生成 public 文件夾

$ hexo g

瀏覽器輸入 localhost:4000 本地查看效果

$ hexo s

主題

hexo 有很多主題可選,我選了 Jacman,默認支持多說評論、網站統計、分享等功能,只要稍微配置即可使用。可以根據自己需求進行選擇。

使用 hexo部署

配置 _config.yml

deploy:  type: git  repository: git@github.com:[yourGithubAccount]/[yourGithubAccount].github.io.git  branch: master

$ hexo d

即可將 hexo 部署到 github 上

提示找不到 git 時
需執行(雖然之前已經執行過)

npm install hexo-deployer-git --save

然後

$ hexo d

即可通過 http://[yourGithubAccount].github.io/ 查看了

發表新文章

$ hexo new "title"

然後在 source/_post 下會生成該md文件,即可使用編輯器編寫了

編寫過程中,可以在本地實時查看效果,很是方便

支持 markdown,不了解的自行 google 吧

編寫完成後,部署還是一樣的

$ hexo g$ hexo d

如果部署過程中報錯,可執行以下命令重新部署

$ hexo clean$ hexo generate$ hexo deploy

添加自定義頁面

$ hexo new page "about"

該命令會生成 source/about/index.md,編輯即可

插件的升級與卸載

$ npm update$ npm uninstall <plugin-name>

更新 hexo

npm update -g hexo

綁定自定義域名

在/source/ 目錄下新建內容為自定義域名的 CNAME 文件,部署即可(域名設置略)

備註:
Hexo簡寫命令

hexo n hexo g hexo s hexo d

以上是基本操作,質量高的 blog 所帶來的好處是不言而喻的,感興趣的可以行動起來了。

參考資料

相關焦點

  • 使用Hexo+Github搭建個人博客網站
    下面,我將會介紹如何來使用Hexo+Github搭建個人博客網站。為了順利地完成個人博客網站的搭建,需要做以下準備工作:安裝Hexo(命令為npm i -g hexo);搭建博客下面將分步來介紹如何使用Hexo和Github來搭建個人博客網站。
  • Hexo+Github/Gitee 搭建個人博客
    如果你有總結整理的習慣,可以考慮搭建一個個人博客,把文章發布在上面,相比於其它平臺,
  • Github + Hexo 搭建博客
    一轉眼已經過去了四年,最近恰好有想要做的,也有想要分享的,那就重拾一下這個博客,趁著國慶放假,收拾收拾。背起行囊,繼續出發。種一棵樹最好的時間是十年前,其次是現在。那就先簡單記錄一下自己 Github + Hexo 搭建屬於自己的博客的過程吧!
  • 用 GitHub + Hexo 建立你的第一個博客
    建立博客的通常渠道包括:在博客平臺上註冊,比如 博客園、CSDN、新浪博客 等。利用博客框架搭建,如 WordPress、Jekyll、hexo 等。自己用代碼寫一個。其中,第一種最簡單,也最受限,說不定還會被刪帖刪號。第二種稍複雜,另外需要自己找部署的伺服器,但可定製化較高,是很多程式設計師的選擇。
  • 如何用 GitHub 從零開始搭建一個博客?
    作為目前全球最大的程式設計師社區,GitHub 能做的可不僅僅是託管源碼這一操作,你還可以使用 GitHub 的 Pages 功能來搭建一個屬於自己的博客,在上面寫文章,開評論,跟讀者互動,隨意更換博客主題,只要你想折騰,這些都能輕鬆做到。今天跟大家分享一篇文章,教你如何一步步使用 GitHub 搭建出個人博客。
  • 如何搭建一個比簡書更精美的個人博客
    幸好我們生存在一個開源的時代,今天小編就用hexo,帶你搭建一個比簡書更精美的個人博客。只要把hexo部署到雲伺服器再配置一個域名就萬事大吉了。二、部署然而,大多數想嘗鮮的人並不想如此破費。我們也還需要其他方案——利用github來建立自己的主頁。
  • 如何用 GitHub 從零開始搭建一個博客 ?
    GitHub 搭建個人博客的文章:【新手向】從零開始搭建一個酷炫免費的個人博客但有些細節方面寫的不是很清楚,依舊有很多小夥伴來反饋沒有搭建成功。今天周末就跟大家分享一篇文章,細節滿分,教你如何一步步使用 GitHub 搭建出個人博客。按照步驟一步步操作下去,你肯定能擁有一個自己的博客,Let's go !準備條件在這裡先跟大家說一些準備條件,有些同學可能一聽到搭建博客就望而卻步。弄個博客網站,不得有臺伺服器嗎?不得搞資料庫嗎?不得註冊域名嗎?
  • 個人博客|第一章|手把手教你搭建、上線個人博客
    」前言Hello,我是淡漠,今天帶大家一起搭建個人博客。個人博客一直都是非常受歡迎的個人項目,個人博客分靜態和動態兩種,淡漠個人比較青睞靜態博客,靜態不需要管理後端,相比動態博客,靜態博客可以不需要花一分錢,開發成本要低一些,畢竟作為學生黨,買伺服器放一個博客網站有點浪費,也可以把精力集中於寫博客,而不是開發博客。
  • 如何擁有個人的Github技術博客
    題圖:87testing.com前不久用wordpress搭建了一個博客,用起來感覺不是太好用,並且資料庫經常會發生異常掛掉
  • 手把手搭建個人博客(圖文教程)
    首先我們談一談搭建個人博客必要性,個人認為在學習過程中,被動接受知識對你的提高是輕微的。可見搭建個人博客是非常有必要的,很多讀者很早就要求我發一篇搭建個人博客的文章,由於個人時間願意本來想直接轉載,但是在自己實際操作中遇到很多坑,浪費不少時間,都是把主要步驟給出且時間久遠,沒有詳細的圖文配合。
  • 現在還有1%的程式設計師不會搭建博客,是你嗎?
    在 2020 年如果還沒有自己的技術博客確實有點落伍了,但是搭建自己的技術博客有很多種技術方案,我知道的有  Hexo, jeklly, vuepress  等。寵粉無邊,所以儘量所有的技術方案都手把手教大家一輪,讓大家都有自己的個人博客。
  • 使用GitHub和阿里雲效自動發布博客
    前言我接觸過很多博客平臺:WordPress、Jekyll、Hexo、Typecho和Vuepress,有的是靜態博客有的需要伺服器運維,玩過花裡胡哨後私以為博客最重要的是思考和記錄,而不是不停地裝飾。所以總結一些經驗可以讓大家快速把博客搭建起來,並且不會憂愁後續的維護。
  • Hexo博客寫作與圖片處理的經驗
    本文介紹了如何處理博客博客編寫過程中插入圖片,上傳圖片等一些問題,希望我的經驗能夠對大家有幫助。目標我的目標是使用Typora編寫博客,編寫過程中可能通過拷貝、粘貼插入圖片,也可能從網絡上下載圖片。希望能夠達到以下效果:•使用Typora編寫的時候能夠實時看到圖片•本地使用hexo server瀏覽效果時,也能夠看到圖片•圖片和Markdown文件放一起都上傳到GitHub pages。我沒有選擇圖床作為圖片的保存方式,一方面免費的圖床很不穩定,另一方面使用圖床在沒有網絡的情況下可能瀏覽器來還是不太方便。我還是習慣將所有筆記最終都歸檔保存在Evernote中。
  • 從零開始搭建個人博客(一)- 使用hugo搭建個人博客
    static•config.toml 是配置文件,在裡面可以定義博客地址,構建配置,標題,導航欄等等。註:如果是從其他地方copy過來的站點,有可能遇到:WARN 2021/02/03 10:56:17 found no layout file for "HTML" for kind "home": You should create a template file which matches Hugo Layouts
  • 零代碼教你用 GitHub 搭建個人博客!
    轉自量子位,作者賴可GitHub 不僅可以傳代碼,還可以建博客。利用 GitHub Pages 平臺,就可以搭建非常好用的個人博客。但是難點在於,你在要敲很多代碼才能搭出一個博客。對於小白和新手來說,太不友好。沒關係!現在不用寫代碼也可以了。不需要敲碼,不用寫使用命令行,可以自定義主題,還能有自己的域名。
  • iOS14搭配快捷指令在手機上寫hexo博客
    突然想起博客年久失修,生活博客半年沒更,技術博客半年內倒是更了兩個,但都是寫了標題沒寫多少內容。不玩lol了之後是越來越懶得動電腦,家裡的臺式機也就是在吃飯的時候才打開20分鐘用B站下飯。由於博客使用hexo搭建,不開電腦的話更新的機率就很小。所以我就想,我能不能在手機上寫博客,再用一種快捷的方式推送到伺服器上?
  • 可能是最全面的github pages搭建個人博客教程
    Git倉庫首先你要在github上有自己博客倉庫,用來生成和存放博客文章。你可以直接fork我的博客倉庫。這樣你馬上有了自己的博客倉庫。點這裡https://github.com/lemonchann/lemonchann.github.io我的博客地址進去fork,之後在你自己的倉庫下會看到剛複製的倉庫。以後的操作都在你自己的倉庫進行。
  • 技巧| Blogdown+Hugo+Netlify搭建個人博客
    R語言-15-Blogdown+Hugo+Netlify搭建個人博客大家好,我是阿狸,這裡是阿狸筆記。
  • 一杯茶的時間,上手 Gatsby 搭建個人博客
    我的博客最初是用 Github Pages 默認的 Jekyll[2] 框架,其使用的 Liquid[3] 模板引擎在使用上有諸多不便。後來基於 Node.js 的 Hexo[4] 橫空出世,我便重構了博客[5]對其深入整合,還為其寫了一個 emoji 插件[6]。
  • 我要用這個教程搭建個自己的個人博客
    你是不是特別想創建一個自己的私人博客?以及為什麼要使用 blogdown 搭建博客?難度是不是很大,和其他搭建博客而言有什麼優點?在小編使用過一段時間後,個人認為 blogdown 搭建博客的優勢在於,將 Rmarkdown 與 hugo 相結合,再加上 github 和一個可以部署的網站。你可以輕鬆的將一篇篇 Rmarkdown 的文章自動上傳上去。而 Rmarkdown 的優勢在於,你的代碼結果都可以輕鬆呈現。而不是「複製粘貼」結果!