使用GitHub+Hexo快速搭建自己的技術博客

2022-01-12 黑馬程式設計師

為什麼要做技術博客？

1、你可能會遇到過這種情形, 開發中遇到一個問題不知道怎麼去解決, 然後去百度找答案, 嘗試各種解決方案, OK終於解決了, 沒過多久又碰到同樣的一個問題, 已經忘記之前是怎麼解決的了, 又要花很長的時間去百度了. 如果我們把遇到的問題都自己總結出來做成筆記, 那麼在我們整理這個筆記的過程中可能就會細化這個問題, 從而加強記憶掌握這個問題, 而不是說遇到問題只是百度解決問題下次再遇到再百度的一個過程, 而是應該遇到問題-->解決方案-->總結記住問題解決方案, 這才是我們能不斷學習進步的一個過程.

2、當我們堅持去做筆記做總結, 不僅方面我們自己日後去複習去查找, 如果把我們的總結放到網上也會幫助很多遇到同樣問題的人, 可以替他們也節省很多時間, 日積月累我們的文章寫的多了, 也會慢慢的提高我們在網絡上的一個知名度.

做自己的技術博客要不要花錢呢？

很多人一想到做網站就會想到說要買域名買伺服器等等, 一年又得不少錢吶, 其實不用, 做一個技術博客可以完全免費的, 我們可以借用Github給我們提供的免費倉庫來存放我們的博客項目, 也可以使用Github給我們提供的靜態頁面地址來訪問到我們的博客, 所以都是免費的, 如果你想看起來高大上一些, 那你可以花錢買一個自己喜歡的域名, 那也花不了多少錢.

如何開始搭建自己的技術博客呢？

軟體安裝

安裝Nodejs 下載安裝Nodejs 因為我是在windows下操作的所以下載的是windows的安裝版 安裝的過程非常簡單, 直接下一步即可 

安裝Git 下載安裝Git Git的安裝也是直接下一步即可 

安裝Hexo 如果你已經安裝了Nodejs和Git, 接下來就可以使用命令來安裝Hexo了 因為是使用命令在線安裝的所以一定要有網絡連接 打開CMD窗口輸入　：npm install -g hexo-cli

初始化Hexo 安裝Hexo之後打開一個文件夾, 用來初始化Hexo, 這個文件夾作為你的博客的主目錄 　然後使用CMD命令行進入到這個目錄下執行初始化命令：hexo init

接著執行npm install命令

運行Hexo 在前面步驟都準備完畢的時候執行命令hexo s -g然後在瀏覽器中輸入http://localhost:4000即可查看已安裝默認主題的Hexo

更換默認主題

安裝主題

Hexo默認的主題可能不是你想要的, 那你就可以去Hexo官方收集的主題裡選擇自己喜歡的主題，也可以自己去GitHub上面自己找主題。 我使用的主題是NexT，在此感謝所有給Hexo提供主題的作者，給我們提供了又好看又好用的主題。 下面就針對我使用的

NexT

主題的配置做一個介紹, 其他主題的配置也都大同小異, 一般主題都會有對應的配置說明, 你可以根據自己選擇的主題去修改 你可以直接從GitHub上面下載然後解壓到你Hexo目錄的themes目錄下面，也可以使用終端克隆，如果你熟悉 Git 建議你使用克隆的方式，之後的更新可以進入到主題文件夾下通過 

git pull

 來快速更新，而不用再次下載壓縮包替換, 注意目錄層級, 如果解壓後的主題有多級目錄, 建議把主題文件放到主題文件夾下面的根目錄, 也可以給主題文件夾重命名

那要怎麼從默認的主題切換到剛下載的這個主題呢 找到Hexo根目錄下面的 _config.yml 文件，將theme欄位設置為你的主題名稱，如theme: next並把之前的主題名使用#號注釋掉, 這個主題的名字一定要和你theme目錄下的那個主題文件夾名稱一致 

修改後在終端輸入Hexo s -g，然後刷新瀏覽器重新訪問http://localhost:4000就可以看到你安裝的新主題啦

配置主題

雖然已經切換到你新下載的主題了, 但是我們還需要對主題做一些定製化的修改 這裡說兩個配置文件, 一個是Hexo根目錄下的_config.yml文件, 一個是主題文件夾下面的_config.yml

文件, 兩個配置文件同名, 暫且先叫配置一文件和配置二文件 打開配置一文件, 裡面可以配置一些和你這個技術站點相關的信息, 還有如果你裝了一些插件的話也要在這個配置文件中配置, 這個配置非常簡單, 採用鍵值對的形式, Hexo官方也給出了非常詳細的配置說明https://hexo.io/docs/configuration.html 再說一下配置二文件, 這個是針對主題做修改的, 可以參考你下載的主題說明, 由於每個人選擇的主題不同, 我這裡不做詳細說明了

發布文章

當你配置好主題之後, 那麼重點就來了, 怎麼發布文章呢 首先打開CMD命令窗口, CD到Hexo的根目錄下, 執行下面這兩條命令 hexo new page "tags"hexo new page "categories" 這兩條命令是創建分類和標籤文件夾的, 執行完後會在根目錄下的source目錄中創建tags文件夾和categories文件夾, 裡面分別會有一個index.md文件 分別打開這兩個文件就行修改 categories下的index.md內容如下

---

title: #categories

date: 2018-05-01 10:24:00

type: "categories"

comments: false

---

tags下的index.md內容如下

---

title: #tags

date: 2018-05-01 10:24:00

type: "tags"

comments: false

---

這些都準備好了之後就可以寫文章了, 文章格式必須是markdown的這個沒得說 但是在每篇文章內容之前有一個固定的頭格式是這樣的

---

title: 博客模板   <!--文章標題-->

date: 2015-09-26 15:09:16  <!--創建日期-->

updated: 2015-09-26 15:09:16 <!--更新日期-->

categories: 分類名稱    <!--只能有一個分類-->  

tags: [標籤, 標籤, 標籤]

comments: false <!--開啟文章的評論功能-->

description: 你對本頁的描述

photos:

  - 圖片的網絡地址 <!--可以在你的文章前面顯示一張大圖-->

---

以上欄位可以根據自己需要添加或者忽略不寫, 一般title categories tags是要有的, 其他的可以不寫 在下面就是你的文章內容了, 如果你的文章內容較多, 只是想在首頁文章列表中顯示文件的前面一小段描述可以使用 <!-- more -->這個標籤前面的內容就會顯示, 後面的內容點擊閱讀全文的時候才會顯示, 如果你想給你的文章弄上目錄可以使用<!-- toc --> , 把這個加在你文章的第一行就可以了 最後寫完文章之後保持.md文件到source目錄下面的_posts文件夾中, 重新執行hexo s -g命令後即可在網頁上看到了

部署Github

接下來我們就要把這個本地的博客發布到網上了, 這樣其他人才可以訪問的到, 我們使用的是GitHub, 如果你還沒有Github的帳號得先去申請一個帳號, 然後登陸新建一個倉庫

倉庫的名稱是用戶名.github.io

創建完成之後點擊Settings

如果你購買了域名的話可以在這裡設置, 如果沒有域名默認的訪問路徑就是你的倉庫名稱

現在就可以訪問一下你的博客地址了, 會顯示下面的這個界面

接下來我們就要把本地的博客上傳到Github了 點擊頭像選擇Settings

選擇SSH and GPG keys

創建新的SSH key

接下來說怎麼去創建上圖中的Key 在你的博客的根目錄右鍵打開一個git窗口。

先設置你的用戶名和郵箱 git config --global user.email "你的郵箱地址"git config --global user.name "你的英文用戶名" 生成密鑰 ssh-keygen -t rsa -C "你的郵箱地址"

找到密鑰文件的保存位置並且打開, 因為是隱藏文件所以必須顯示隱藏文件才能看到。

打開文件夾裡面有兩個文件, 打開id_rsa.pub並複製其內容

然後再回到Github把複製的內容粘貼過去

點擊添加按鈕返回添加完成頁面

可以使用下列命令來測試SSH有沒有添加成功

然後再返回剛才自己建的倉庫

複製SSH的地址

打開博客根目錄下面的_config.yml文件在最下方粘貼

然後打開命令行執行命令hexo d -g即可發布到Github

如果出現上述錯誤, 可以使用npm install --save hexo-deployer-git命令解決 再次執行命令hexo d -g

再次訪問你的Github(用戶名.github.io)地址就能看到你發布的內容了 接下來就可以盡情的寫文章了

寫在後面

404頁面

404頁面我使用的是騰訊公益, 直接複製下面代碼保存成.html文件放到source目錄下重新部署到GitHub即可

<!DOCTYPE HTML>

<html><head>

  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <meta name="robots" content="all" />

  <meta name="robots" content="index,follow"/>

  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css"></head><body>

  <script type="text/plain" src="http://www.qq.com/404/search_children.js"

          charset="utf-8" homePageUrl="/"

          homePageName="回到我的主頁">

  </script>

  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>

  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script></body></html>

圖床

在寫markdown的時候避免不了的要插入很多的圖片, 這個時候就要使用到圖床了, 推薦大家使用七牛圖床

綁定域名

域名申請推薦大家去GoDaddy申請, 然後綁定到Github Pages, 綁定方法也很簡單, 在source目錄下新建一個文件命名為CNAME沒有擴展名, 內容就直接寫上你申請的域名即可, 然後重新部署到Github

域名解析

推薦大家使用DNSPod, 具體可以參考Godaddy註冊商域名修改DNS地址

其他

還可以自己添加統計, 分析, 搜索, 自定義掛件, 插件, 提交搜尋引擎

相關焦點

  • 手把手教你使用Hexo + Github Pages搭建個人獨立博客
    (hexo g) 生成靜態文件，會在當前目錄下生成一個新的叫做public的文件夾hexo server (hexo s) 啟動本地web服務，用於博客的預覽hexo deploy (hexo d) 部署播客到遠端（比如github, heroku等平臺）另外還有其他幾個常用命令：$ hexo new "postName" $ hexo
  • 如何搭建一個比簡書更精美的個人博客
    所以一般技術大神都有自己專門的博客，既能隨心所欲地展現自己的靈感，也可以讓自己的勞動免受垃圾廣告的侵犯，為求知者提供了集專業和舒適於一體的美的享受。幸好我們生存在一個開源的時代，今天小編就用hexo，帶你搭建一個比簡書更精美的個人博客。
  • 「分享」|hexo搭建個人博客
    今天的話，就來梳理一下從無到有如何搭出來一個項目，技術有限，也請大家多多指正哈。圖1如果你沒有自己伺服器的話，而且只是弄著玩玩，不怎麼經常性去維護的話，可以考慮部署到github或者coding呢，這裡暫時只講部署到github，coding類似。
  • 手把手教你從零搭建和部署自己的個人博客
    在我看來，搭建自己的個人博客主要有以下好處：      •  有助於養成歸納總結的習慣，幫助記憶，把別人的知識變成自己的知識。         •  通過記錄自己工作和生活，鍛鍊自己的寫作的能力。           •  培養開放（開源）意識，與大家一起學習交流，共同進步。「對外開放」作為我國的一項基本國策，其效果有目共睹。
  • Hexo(3)-安裝自己喜歡的主題
    本篇來講解如何安裝自己喜歡的主題！我們之前使用 Hexo 生成的博客使用的是 Hexo 的默認主題：Landscape。怎麼說呢，這個主題猛地一看還行，仔細一看還不如猛地一看，所以我決定另尋歸宿。選擇主題可以在 hexo主題總站https://github.com/hexojs/hexo/wiki/Themes尋找自己喜歡的主題。
  • Docker最全教程之使用Node.js搭建團隊技術文檔站(二十四)
    ;});server.listen(port);Dockerfile文件如下所示：FROM node:8.9-alpineEXPOSE 80COPY . .ENTRYPOINT ["node","app.js"]構建命令如下所示：docker build --rm -f "dockerfile" -t nodetest1:latest .
  • Hexo 中 Next 主題設置
    注意:由於微信公眾號「湧動的生命力」不能引用外鏈，外鏈詳見參考文獻部分Hexo 中有很多主題，可以在官網 Hexo主題中查找選擇自己喜歡的主題，我最終選擇的是 Next，主要是因為簡潔且網上的教程也比較多，這裡記錄下我博客的 Next 主題配置，效果詳見博客：https://monkeylzl.github.io/更換主題
  • 前端技術小白零基礎搭建免費個人網站
    4、註冊GitHub網站帳號進入github.com 官網點擊Sign up ，英文看不懂就網頁一鍵翻譯，這裡大家自己發揮吧。不做過多講解 小哥哥小姐姐們開始敲命令了，穩住哦，git bash 我不提供操作圖了，請按照我的步驟來：創建 SSH Key$ ssh-keygen -t rsa -C 「這裡輸入github註冊郵箱號」一路回車，使用默認值即可登陸GitHub，打開「Settings」->「SSH and GPG Keys」，「New
  • 唯美主題hexo-sakura使用教程
    正在開發中……主題特性首頁大屏視頻首頁隨機封面圖片懶加載valine評論fancy-box相冊pjax支持，頁面不刷新音樂不間斷aplayer音樂播放器多級導航菜單（按現在大部分hexo主題來說，這也算是個特性了）未完善的使用教程那啥？
  • 【讀者投稿】用Github+docsify,我花了半天就搭好了個人博客
    慚愧的是，入行兩年多了都沒搞起來，這讓我一度懷疑自己是個假程式設計師。昨天終於克服了心裡的「猶豫」和「恐懼」，嘗試搭建了一把，半天就搞好了，看著能用。搭建博客只是一個小任務，為啥遲遲不能完成？只能說明鄙人執行力太差。想的多做的少，大多數時候我們只要開始行動之後，好多問題都會迎刃而解了。引用最新網上很流行的一段話，與君共勉之：我們遇到什麼困難也不要怕，微笑著面對它！
  • 利用 Github Pages 和 Hugo 快速搭建免費的個人網站
    點擊上方「程序猿技術大咖」，關注並選擇「設為星標」你有個人網站嗎？在自媒體時代，人人都在不斷向網際網路等不同媒介輸出內容，如：博客、微博以及抖音等，並在特定領域，依靠於廣大社交媒體/平臺，如：CSDN、掘金、知乎、InfoQ 等等，發表著自己的心得、學習經歷、日常生活等。
  • 那些看上去高大上的項目文檔和個人博客原來用了這些技術
    DocsifyDocsify 可以快速幫你生成文檔網站。它不會生成靜態的 .html 文件，所有轉換工作都是在運行時。如果你想要開始使用它，只需要創建一個 index.html 就可以開始編寫文檔並直接部署在 GitHub Pages 或者Gitee Pages。
  • 不會代碼,如何零成本搭建個人博客?
    自微信推出公眾號後，無論是博客時代就開始寫作的人，還是後來有志於投身新媒體的人，都紛紛註冊了自己的帳號
  • 教你如何搭建自己的圖床
    > 動動大拇指關注哦~教你如何搭建自己的圖床
  • 使用pelican搭建自己的靜態博客
    前言最近想要搭建自己的靜態博客
  • 輕鬆入門直播相關技術 帶你從0搭建直播系統
    一個簡易的直播系統，大致可以由三部分組成：現在目標是快速搭建起來，所以當然是藉助開源項目和一些軟體：rtmp媒體伺服器：這裡使用srs推流端：這裡使用obs拉流端：這裡使用播放器vlcrtmp媒體伺服器的搭建這裡使用srs，srs的連結為：https://github.com/ossrs
  • Linux上使用tinyproxy快速搭建HTTP/HTTPS代理器
    前言本文主要講解如何在Linux上使用tinyproxy搭建HTTP/HTTPS代理器。tinyproxy是一個HTTP/HTTPS代理。它是輕量級的、快速的、非常容易配置的，而且是一個開源的代理服務。Tinyproxy也可以配置為反向代理。它很適合用作具有較少系統資源的小型代理，因為它是非常輕量級的。
  • 那些年曹大寫過的博客
    即使沒有也可以自己創造機會，例如組內、組間、部門內的技術分享都是不錯的機會。更大規模的技術分享可能因為主辦方「勢力眼」，在你級別不高或者影響力不大的時候，不提供給你這樣的機會，但是作為一個向上的人，遲早會有走到這一步的一天。你所要做的是提前做好準備，在那一天到來的時候，在聚光燈下旁徵博引，談笑風生。祝大家都能成為更好的自己！