hexo+github搭建個人博客

hexo+github搭建個人博客

前言:

有那么多的博客平臺,為什么要搭建個人博客?

  • 基于共享平臺的策略會審核發(fā)布內(nèi)容并可能隨時被刪
  • 你是否想搭建專屬的個性化博客,定義自己的精美頁面
  • 作為一個編程從業(yè)者,有一個專門記錄自己成長的博客可以作為求職的一個技能棧介紹

本系列教程將搭建一個這樣的博客Hackt0's Blog預(yù)覽(博客還在完善中)
原文鏈接

準(zhǔn)備工作

  • github賬號
  • node.js 、git

本文環(huán)境

  • Window11/Windows10 x64
  • node.js v16.11.1(使用最新版本運行hexo server 是會出現(xiàn)告警,但是不影響使用,如果介意,可以使用低版本)
  • Git v2.33.1
  • hexo v5.4.0

準(zhǔn)備工作

創(chuàng)建github倉庫

首先在gitHub官網(wǎng)注冊一個賬號(注冊的用戶名會和之后的博客域名相關(guān),可以直接想好,避免二次修改),由于github在外網(wǎng),可能出現(xiàn)無法訪問的情況,可以參考解決github訪問失敗 - 簡書 (jianshu.com)

注冊完成后會收到一份郵件,要點擊完成下注冊驗證

以新建賬號為例做介紹,創(chuàng)建一個倉庫

create repository.png

Repository name一欄填上用戶名.github.io,如上圖用戶名為shuhan520,那么對應(yīng)的Repository name就是shuhan520.github.io,再勾選一下Add a README file選項用于快速生成項目頁面,其余選項全部默認(rèn)即可

創(chuàng)建后可以在Settings-Pages看到自己的專屬域名了(不推薦使用projectpage,如果使用其他名稱生成的域名會帶有路徑,搭建博客時會出現(xiàn)路徑導(dǎo)致的資源訪問問題),此時訪問網(wǎng)頁是剛剛創(chuàng)建的README文檔內(nèi)容,沒有勾選Add a README file選項的需要添加內(nèi)容才可以生成

GithubPages.png

上圖Custom domain可以綁定其他域名

配置SSH Key

可以使用Git官網(wǎng)下載和安裝git,安裝完成后鼠標(biāo)右鍵空白處菜單欄會出現(xiàn)git bash here選項,設(shè)置個人郵箱和用戶名

$ git config --global user.name "你的GitHub用戶名"
$ git config --global user.email "你的GitHub注冊郵箱"

生成ssh-key文件

$ ssh-keygen -t rsa -C "你的GitHub注冊郵箱"

生成過程中需要設(shè)置生成路徑、密碼,默認(rèn)空白即可;注意使用默認(rèn)路徑時是否存在提示already exists,如果有可以輸入'n'退出,重設(shè)路徑或者使用現(xiàn)有ssh-key(郵箱相同時)

找到生成的.ssh的文件夾中的id_rsa.pub,記事本打開復(fù)制全部內(nèi)容即可

可以在SSH and GPG keys (github.com)點擊New SSH Key,title為任意內(nèi)容,key輸入剛剛復(fù)制的key文件內(nèi)容,點擊Add SSH Key即可

任意位置打開cmd命令行窗口輸入

$ ssh git@github.com

看到以下內(nèi)容即可(初次訪問可能需要添加GitHub域名到可信域名,確認(rèn)連接時輸入yes即可)

PTY allocation request failed on channel 0
Hi shuhan520! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.

安裝node.js

可以使用node.js官網(wǎng)下載和安裝node.js,打開控制臺輸入以下命令可正常輸出版本號即安裝完成

$ node -v
$ npm -v

至此所有的準(zhǔn)備工作已經(jīng)完成

博客搭建

框架選取

快速構(gòu)建博客可以選擇hexo,hugo,wordpress等框架,本文使用的時hexo,因為靜態(tài)頁面搭建相對簡單,檢索時發(fā)現(xiàn)hexo擁有很多美化主題和美化教程,同時自動根據(jù)markdown文檔識別文章列表、分類、標(biāo)簽、翻頁等動態(tài)內(nèi)容,相對于小白比較容易上手

hexo官網(wǎng)
hexo github

hexo安裝

新建一個單獨的目錄用于搭建博客,在新建目錄下打開cmd命令行輸入以下命令

$ npm install -g hexo

安裝完成后輸入以下命令初始化

$ hexo init

hexo會自動下載相關(guān)文件到本地,此時可以通過以下命令開啟本地預(yù)覽

$ hexo g
$ hexo s

打開瀏覽器訪問 http://localhost:4000即可看到未發(fā)布的頁面效果(本地訪問可以使用瀏覽器隱私模式,避免因緩存而導(dǎo)致修改效果無法正常顯示)

如果提示端口占用可以使用以下命令更改端口

$ hexo server -p 5000 #更改端口到5000

推送到Github

安裝github插件

$ npm install hexo-deployer-git --save

修改hexo主目錄下的站點配置文件_config.yml,修改最下方deploy為如下內(nèi)容,yml以縮進表示層級關(guān)系,所以務(wù)必要使用空格對齊

deploy:
  type: git
  repo: git@github.com:`your username`/`your username`.github.io.git
  branch: main

推送到github倉庫:

$ hexo d

如果推送時提示

nothing to commit, working tree clean

請清除本地緩存,重新生成后推送:

$ hexo clean && hexo g
$ hexo d

至此,可以使用github分配的個人域名訪問到博客了

關(guān)于更多配置和美化由于簡書平臺支持的md格式有限,可以訪問hexo 個人博客美化 | Hackt0's Blog

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容