Hexo+Github+Netlify博客搭建教程大家好，我是Leo🫣🫣🫣，前段時間有朋友問了一些關於博客搭建的相關問題，考慮到我之前發的那一篇博客搭建教程比較久遠了，所以最近打算重新重構一下博客搭建教程，以我現在最新的博客站點為例，帶大家從零開始搭建Hexo博客，記錄屬於你的自己的故事吧，好了，話不多説讓我們開始吧😎😎😎。1.前言博客初步的頁面效果可以看一下我的博客：Leo，歡迎大家支持訪問。

本博客基於Hexo，所以首先要了解一下我們搭建博客所要用到的框架。Hexo是高效的靜態網站生成框架，它基於Node.js快速，簡單且功能強大，是搭建博客的首選框架。大家可以進入hexo官網進行詳細查看，因為Hexo的創建者是台灣人，對中文的支持很友好，可以選擇中文進行查看。通過 Hexo，你可以直接使用Markdown語法來撰寫博客。相信很多小夥伴寫工程都寫過README.md 文件吧，對，就是這個格式的！寫完後只需兩三條命令即可將生成的網頁上傳到github或者coding等代碼管理託管平台，然後別人就可以瀏覽你的博客網頁啦。是不是很簡單？你無需關心網頁源代碼的具體生成細節，只需要用心寫好你的博客文章內容就行了。教程大致分三個部分，第一部分：Hexo的初級搭建還有部署到 Github page上，以及個人域名的綁定。第二部分：Hexo的基本配置，更換主題，實現多終端工作，以及在coding page 部署實現國內外分流第三部分：Hexo添加各種功能，包括搜索的SEO，閲讀量統計，訪問量統計和評論系統等，並在國外netlify進行託管。2.Hexo搭建2.1 安裝nodejsHexo是基於node.js編寫的，所以需要安裝一下node.js和裏面的npm工具。windows：下載穩定版或者最新版都可以Node.js，安裝選項全部默認，一路點擊Next。
最後安裝好之後，按Win+R打開命令提示符，輸入node -v和npm -v，如果出現版本號，那麼就安裝成功了。建議直接到nodejs官網去下載，如下所示:

然後解壓到你指定的文件夾即可，比如我解壓到我係統的 D:\software\nodejs 目錄下了，如圖:

這樣我們在所有用户下，都可以使用npm，也可以使用npm安裝的包的命令。成功的將nodejs安裝並配置到全局環境下。安裝完後，打開命令行終端，輸入: node -v npm -v檢查一下有沒有安裝成功

看到以上版本號即使安裝成功！2.2 添加國內鏡像源如果沒有梯子的話，可以使用阿里的國內鏡像進行加速。 npm config set registry https://registry.npm.taobao.org2.3 安裝Hexo前面git和nodejs安裝好後，就可以安裝Hexo了，你可以先創建一個文件夾Hexo(這裏名字隨意)，用來存放自己的博客文件，然後cd到這個文件夾下（或者在這個文件夾下直接右鍵git bash打開）。比如我的博客文件都存放在D:\Hexo目錄下。在該目錄下右鍵點擊Git Bash Here，打開Git的控制枱窗口，以後我們所有的操作都在Git控制枱進行，就不用Windows自帶的cmd了。定位到該目錄下，輸入以下命令安裝Hexo。可能會有幾個報錯，無視它就行。 npm install -g hexo-cli安裝完後輸入以下 驗證是否安裝成功。 hexo -v

看到以上內容，至此Hexo就安裝完了。接下來初始化一下Hexo,即初始化我們的網站，進入我們主題根目錄Hexo，輸入hexo init初始化文件夾 hexo init 這個Hexo可以自己取什麼名字都行，然後，接着輸入npm install安裝必備的組件。這樣本地的網站配置也弄好啦，輸入hexo g生成靜態網頁，然後輸入hexo s打開本地服務器， hexo g hexo server(或者簡寫:hexo s）

按ctrl+c關閉本地服務器。2.4 註冊Github賬號創建個人倉庫接下來就去註冊一個github賬號，用來存放我們的網站。大多數小夥伴應該都有了吧，作為一個合格的程序猿(媛)還是要有一個的。打開https://github.com/，新建一個項目倉庫 New repository，如下所示：

要創建一個和你用户名相同的倉庫，後面加http://github.io，只有這樣，將來要部署到GitHub page的時候，才會被識別，也就是 http://xxxx.github.io，其中xxx就是你註冊GitHub的用户名。例如我的：http://gaoziman.github.io2.5 生成SSH添加到GitHub生成SSH添加到 GitHub，連接Github與本地。
右鍵打開git bash，然後輸入下面命令： git config --global user.name "yourname" git config --global user.email "youremail"注意：第一次使用git後需要將用户名和郵箱進行初始化這裏的yourname輸入你的GitHub用户名，youremail輸入你GitHub的郵箱。這樣GitHub才能知道你是不是對應它的賬户。例如我的： git config --global user.name "gaiolan" git config --global user.email "2942892675@qq.com"可以用以下兩條，檢查一下你有沒有輸對git config user.name
git config user.email然後創建SSH,一路回車SSH，簡單來講，就是一個秘鑰，其中，id_rsa是你這台電腦的私人秘鑰，不能給別人看的，id_rsa.pub 是公共秘鑰，可以隨便給別人看。把這個公鑰放在GitHub上，這樣當你鏈接GitHub自己的賬户時，它就會根據公鑰匹配你的私鑰，當能夠相互匹配時，才能夠順利的通過Git上傳你的文件到GitHub上。ssh-keygen -t rsa -C "youremail"這個時候它會告訴你已經生成了.ssh的文件夾。在你的電腦中找到這個文件夾。或者git bash中輸入cat ~/.ssh/id_rsa.pub將輸出的內容複製到框中，點擊確定保存。打開github，在頭像下面點擊settings，再點擊SSH and GPG keys，新建一個SSH，名字隨便取一個都可以，把你的id_rsa.pub裏面的信息複製進去。如圖：

在git bash輸入以下命令。ssh -T git@github.com如果如下圖所示，出現你的用户名，那就成功了。

2.6 將Hexo部署到GitHub這一步，我們就可以將Hexo和GitHub關聯起來，也就是將hexo生成的文章部署到GitHub上，打開博客根目錄下的 _config.yml文件，這是博客的配置文件，在這裏你可以修改與博客配置相關的各種信息。修改最後一行的配置：deploy:
type: git
repository: https://github.com/gaoziman/gaoziman.github.io.git
branch: masterrepository修改為你自己的github項目地址即可就是部署時候告訴工具，將生成網頁通過 Git 方式上傳到你對應的鏈接倉庫中。這個時候需要先安裝deploy-git ，也就是部署的命令,這樣你才能用命令部署到GitHub。npm install hexo-deployer-git --save然後Hexo三連即可將我們本地的代碼上傳到Github倉庫了。hexo clean
hexo generate
hexo deploy其中 hexo clean清除了你之前生成的東西，也可以不加。 hexo generate顧名思義，生成靜態文章，可以用 hexo g縮寫 ，hexo deploy部署文章，可以用 hexo d 縮寫注意deploy時可能要你輸入username和 password。2.7 設置個人域名現在你的個人網站的地址是yourname.github.io，如果覺得這個網址逼格不太夠，這就需要你設置個人域名了。但是需要花錢。不過，這一步不是必要的，如果目前還不想買域名可以先跳過，繼續看後面的，以後想買域名了在還看這塊首先你得購買一個專屬域名，xx雲都能買，看你個人喜好了。這篇以阿里云為例，阿里雲官網購買：

然後實名認證後進入阿里雲控制枱，點雲解析進去，找到你剛買的域名，點進去添加兩條解析記錄，如下圖所示：

然後打開你的github博客項目，點擊settings，拉到下面Custom domain處，填上你自己的域名，保存：

這時候你的項目根目錄應該會出現一個名為CNAME的文件了。如果沒有的話，打開你本地博客/source目錄，我的是D:\Hexo\source，新建CNAME文件，注意沒有後綴。然後在裏面寫上你的域名，保存。最後運行hexo g、hexo d上傳到Github。過不了多久，再打開你的瀏覽器，輸入你自己的專屬域名，就可以看到搭建的網站啦！2.8 寫文章併發布文章首先在博客根目錄下右鍵打開git bash，然後輸入hexo new post "我的第一篇博客"，新建一篇文章。然後打開D:\Hexo\source_posts的目錄，可以發現下面多了一個文件夾和一個.md文件，一個用來存放你的圖片等數據，另一個就是你的文章文件啦。
你可以會直接在webstrom或者VSCode裏面編寫markdown文件，可以實時預覽，也可以用用其他編寫md文件的軟件的工具編寫---->這裏強烈推薦typora。
編寫完markdown文件後，根目錄下輸入hexo g生成靜態網頁，然後輸入hexo s可以本地預覽效果，最後輸入hexo d上傳到Github上。這時打開你的github.io主頁就能看到發佈的文章啦。到這兒基本第一部分就完成了，已經完整搭建起一個比較簡陋的個人博客了，接下來我們就可以對我們的博客進行個性化定製了。3.主題的應用我們要定製自己的博客的話，首先就要來了解一下Hexo博客的一些目錄和文件的作用，以及如何平滑更換漂亮的主題模板並加入自己的定製源代碼實現個性化定製3.1 Hexo相關目錄文件1.1 博客目錄構成介紹我們博客的目錄結構如下：- node_modules

• public
• scaffolds

• source

  • _posts
• themes下面依次介紹上面各個文件或者目錄的用途：_config.yml： 站點配置文件，很多全局配置都在這個文件中。package.json： 應用數據。從它可以看出hexo版本信息，以及它所默認或者説依賴的一些組件。scaffolds： 模版文件。當你創建一篇新的文章時，hexo會依據模版文件進行創建，主要用在你想在每篇文章都添加一些共性的內容的情況下。scripts： 放腳本的文件夾， 就是放js文件的地方source： 這個文件夾就是放文章的地方了，除了文章還有一些主要的資源，比如文章裏的圖片，文件等等東西。這個文件夾最好定期做一個備份，丟了它，整個站點就廢了。themes： 主題文件夾。我們平時寫文章只需要關注source/_posts這個文件夾就行了。1.2 Hexo基本配置在文件根目錄下的_config.yml，就是整個Hexo框架的配置文件了。可以在裏面修改大部分的配置。詳細可參考官方的配置描述。
  
• 網站參數描述title網站標題subtitle網站副標題description網站描述author您的名字language網站使用的語言timezone網站時區。Hexo 默認使用您電腦的時區。時區列表。比如説：America/New_York, Japan, 和 UTC 。其中，description主要用於SEO，告訴搜索引擎一個關於您站點的簡單描述，通常建議在其中包含您網站的關鍵詞。author參數用於主題顯示文章的作者。2. 網址參數描述url網址root網站根目錄 permalink文章的永久鏈接 格式permalink_defaults永久鏈接中各部分的默認值在這裏，你需要把url改成你的 網站域名。permalink，也就是你生成某個文章時的那個鏈接格式。比如我新建一個文章叫temp.md，那麼這個時候他自動生成的地址就是http://yoursite.com/2022/05/08/temp。以下是官方給出的示例，關於鏈接的變量還有很多，需要的可以去官網上查找 永久鏈接 。參數結果:year/:month/:day/:title/2023/10/10/hello-world :year-:month-:day-:title.html 2019-08-10-hello-world.html :category/:titlefoo/bar/hello-world再往下翻，中間這些都默認就好了。下面給出我的網站配置
  
  theme: landscaptheme就是選擇什麼主題，也就是在themes這個文件夾下，在官網上有很多個主題，默認給你安裝的是lanscap這個主題。當你需要更換主題時，在官網上下載，把主題的文件放在themes文件夾下，再修改這個主題參數就可以了。3. Front-matterFront-matter 是md文件最上方以 ---分隔的區域，用於指定個別文件的變量，舉例來説：title: Hexo+Github博客搭建記錄
  date: 2023-10-13 15:15:44下是預先定義的參數，您可在模板中使用這些參數值並加以利用。參數描述layout佈局 title標題 date建立日期 update更新日期 comments開啓文章的評論功能 tags標籤（不適用於分頁）categories分類（不適用於分頁）permalink覆蓋文章網址。其中，分類和標籤需要區別一下，分類具有順序性和層次性，也就是説Foo，Bar不等於Bar，Foo；而標籤沒有順序和層次。3.2 更換主題
  
  Hexo官方為我們提供了很多開發者大佬提供的精美主題供大家更換，大家看選擇一個自己喜歡的即可。官網：https://hexo.io/themes/筆者這裏選擇了一個相對於簡約的主題，名字叫keep，大家喜歡的也可以來試試。這裏是附上他的Github地址： https://github.com/XPoet/hexo-theme-keep簡單漂亮，文章內容美觀易讀響應式設計，博客在桌面端、平板、手機等設備上均能很好的展現首頁 Banner 圖片時間軸式的歸檔頁詞雲的標籤頁和分類頁豐富的關於我頁面可自定義的數據的友情鏈接頁面支持文章置頂支持 MathJax美觀的TOC目錄可設置複製文章內容時追加版權信息Twikoo、Valine 和 Disqus 評論模塊（推薦使用Twikoo ）集成了不蒜子統計、谷歌分析（Google Analytics）和文章字數統計等功能支持在首頁的音樂播放和視頻播放功能他的介紹文檔寫得非常的詳細，https://keep-docs.xpoet.cn/，簡直是保姆級教程，大家可以慢慢去探索。
  
  4.優化功能使用Netlify 的繼承部署可以在它的服務器按照你設定的命令，自動進行部署網站，也就是説，當你把源碼直接提交到github的時候，netlify就會自動部署好你的網站。github用來保存博客的源碼 ,而netlify存有靜態網站。可以使用github的賬號直接登錄，這樣關聯倉庫的時候也更加方便。
  
  配置好Hexo的部署命令，並設置發佈目錄。如圖。部署命令與本地部署的命令是一樣的hexo generate
  
  配置你的域名，netlify 默認給你一個二級域名，你可以修改它，也可以綁定自己已有的域名。同時你也可以使用免費提供的ssl證書,開啓Https。到這裏配置就基本完成了。此時你的網站就可以使用它分配或你綁定的域名訪問了。你也可以根據你自己的需要進行別的改動。當你寫完文檔時，把Hexo目錄直接提交到Git倉庫中，netlify會把網站自動部署好，你可以在nelify查看你的部署日誌。這樣你的Git倉庫就只用來保存hexo的源碼，而網站是放在netlify上的。netlify也有cdn，但是速度仍然不是很好，服務器在國外，也就是這樣了。你也可以使用了自己的cdn服務，以加快網站的訪問速度。最後效果讓我們看看最後的效果吧
  
  感興趣的小夥伴別猶豫了，抓緊搭建起來！5.總結以上便是本文的全部內容，本人才疏學淺，文章有什麼錯誤的地方，歡迎大佬們批評指正！我是Leo，一個在互聯網行業的小白，立志成為更好的自己。如果你想了解更多關於Leo，可以關注公眾號-程序員Leo，後面文章會首先同步至公眾號。