0基礎(chǔ)也能搞定！30分鐘免費(fèi)搭建個(gè)人網(wǎng)站全攻略

你是否也曾想過(guò)擁有一個(gè)自己的網(wǎng)站，卻被復(fù)雜的技術(shù)術(shù)語(yǔ)和步驟嚇退？今天，我要分享一個(gè)超簡(jiǎn)單的方法，只需要30分鐘，零代碼基礎(chǔ)也能免費(fèi)搭建一個(gè)屬于自己的個(gè)人網(wǎng)站！

先搞懂兩個(gè)核心工具：GitHub和Hexo

在開(kāi)始動(dòng)手前，咱們先來(lái)認(rèn)識(shí)一下今天的兩位主角：GitHub和Hexo。這兩個(gè)工具就像一對(duì)黃金搭檔，能幫我們免費(fèi)搭建專(zhuān)業(yè)級(jí)別的網(wǎng)站。

GitHub：不止是代碼倉(cāng)庫(kù)，更是免費(fèi)的網(wǎng)站托管平臺(tái)

GitHub本質(zhì)上是一個(gè)全球最大的代碼托管平臺(tái)，但它還有一個(gè)超實(shí)用的功能——GitHub Pages，可以免費(fèi)幫你托管靜態(tài)網(wǎng)站！

想象一下，GitHub就像一個(gè)免費(fèi)的"網(wǎng)絡(luò)存儲(chǔ)空間"，你可以把你的網(wǎng)站文件放在這里，它不僅幫你保管，還會(huì)免費(fèi)幫你"上線(xiàn)"，讓全世界的人都能訪(fǎng)問(wèn)到。最棒的是，它還提供一個(gè)免費(fèi)的二級(jí)域名（比如：username.github.io），連域名錢(qián)都省了！

Hexo：寫(xiě)文章像記筆記，自動(dòng)生成精美網(wǎng)站

Hexo是一個(gè)博客框架，它的神奇之處在于：你只需要用Markdown寫(xiě)文章，它就能自動(dòng)幫你生成一個(gè)漂亮的靜態(tài)網(wǎng)站！

Markdown是啥？簡(jiǎn)單說(shuō)就是一種超級(jí)簡(jiǎn)單的文本格式，用幾個(gè)符號(hào)就能實(shí)現(xiàn)加粗、標(biāo)題、列表等格式，比Word簡(jiǎn)單100倍！

Hexo的優(yōu)點(diǎn)一大堆：

  • 速度快：生成幾百個(gè)頁(yè)面只需要幾秒鐘
  • 超簡(jiǎn)單：安裝配置幾步搞定
  • 巨能打：支持各種炫酷功能和主題
  • 部署方便：一條命令就能發(fā)布網(wǎng)站

第一步：注冊(cè)GitHub，創(chuàng)建你的第一個(gè)倉(cāng)庫(kù)

?? 準(zhǔn)備工作：注冊(cè)GitHub賬號(hào)

  1. 打開(kāi)GitHub官網(wǎng)（https://github.com），點(diǎn)擊右上角的"Sign up"注冊(cè)賬號(hào)
  2. 按照提示填寫(xiě)用戶(hù)名、郵箱和密碼，完成注冊(cè)
注冊(cè)GitHub賬號(hào)

? 創(chuàng)建網(wǎng)站專(zhuān)用倉(cāng)庫(kù)

  1. 登錄成功之后，點(diǎn)擊 GitHub 中的 New repository 創(chuàng)建新倉(cāng)庫(kù)
創(chuàng)建倉(cāng)庫(kù)
  1. 填寫(xiě)倉(cāng)庫(kù)名稱(chēng)，這一步很關(guān)鍵，倉(cāng)庫(kù)名稱(chēng)必須是你的用戶(hù)名.github.io（把"你的用戶(hù)名"換成你剛注冊(cè)的GitHub用戶(hù)名），按照要求填寫(xiě)后點(diǎn)擊創(chuàng)建即可
填寫(xiě)倉(cāng)庫(kù)名稱(chēng)

第二步：安裝必要工具

1. 安裝Git：代碼管理好幫手

Git是一個(gè)代碼管理工具，我們需要用它來(lái)把本地文件傳到GitHub上。

下載Git
選擇對(duì)應(yīng)系統(tǒng)的安裝包
選擇對(duì)應(yīng)版本的安裝包
  • 安裝過(guò)程中全部選擇默認(rèn)選項(xiàng)即可
安裝Git

2. 安裝Node.js：Hexo的"發(fā)動(dòng)機(jī)"

Hexo是基于Node.js運(yùn)行的，所以我們需要先安裝Node.js。

安裝完成后，打開(kāi)命令提示符（Windows）或終端（Mac），輸入以下命令驗(yàn)證安裝是否成功：

node -v
npm -v

如果能看到版本號(hào)，就說(shuō)明安裝成功啦！

node版本號(hào)

第三步：配置GitHub SSH密鑰

這一步是為了讓你的電腦能夠"免密碼"訪(fǎng)問(wèn)GitHub，省得每次傳文件都要輸入密碼。

  1. 打開(kāi)Git Bash（安裝Git后會(huì)有這個(gè)程序）
  2. 輸入以下命令，設(shè)置你的Git信息（把"你的用戶(hù)名"和"你的郵箱"換成你GitHub的用戶(hù)名和郵箱）：
git config --global user.name "你的用戶(hù)名"
git config --global user.email "你的郵箱"
  1. 輸入以下命令，然后連續(xù)按三次回車(chē)鍵，即可生成SSH密鑰
ssh-keygen -t rsa -C "你的郵箱"
  1. 找到生成的密鑰文件：通常在C:\Users\你的用戶(hù)名\.ssh目錄下，有一個(gè)id_rsa.pub文件，用記事本打開(kāi)id_rsa.pub文件，復(fù)制里面的全部?jī)?nèi)容
復(fù)制密鑰內(nèi)容
  1. 把密鑰添加到GitHub

  • 登錄GitHub，點(diǎn)擊右上角頭像，選擇"Settings"


    選擇Settings

  • 左側(cè)菜單選擇"SSH and GPG keys"，點(diǎn)擊"New SSH key"


    新建密鑰

  • 填寫(xiě)密鑰標(biāo)題（標(biāo)題隨便寫(xiě)），把復(fù)制的密鑰內(nèi)容粘貼到"Key"框里


    添加密鑰

第四步：安裝并初始化Hexo

1. 安裝Hexo命令行工具

打開(kāi)命令提示符（Windows）或終端（Mac），輸入以下命令：

npm install -g hexo-cli

2. 創(chuàng)建并初始化你的博客

  1. 選擇一個(gè)你喜歡的文件夾（比如D盤(pán)），創(chuàng)建一個(gè)新文件夾（比如"MyBlog"）
  2. 打開(kāi)命令提示符，進(jìn)入這個(gè)文件夾：
cd D:\MyBlog
  1. 初始化Hexo博客：
hexo init 你的用戶(hù)名.github.io

3. 本地預(yù)覽你的博客

輸入以下命令，進(jìn)入博客目錄并啟動(dòng)本地服務(wù)器：

cd 你的用戶(hù)名.github.io
hexo s

然后打開(kāi)瀏覽器，訪(fǎng)問(wèn)http://localhost:4000，你就能看到你的博客啦！是不是很神奇？

本地預(yù)覽

第五步：部署博客到GitHub Pages

1. 配置部署信息

用記事本打開(kāi)博客目錄下的_config.yml文件，找到最后面的deploy部分，修改成：

deploy:
  type: git
  repo: git@github.com:你的用戶(hù)名/你的用戶(hù)名.github.io.git
  branch: main

2. 安裝部署插件

在命令提示符中輸入：

npm install hexo-deployer-git --save

<div class="custom-container tip">

hexo-deployer-git 插件是 Hexo 部署到 Git 倉(cāng)庫(kù)的核心工具，它的工作原理有兩個(gè)重要特性：

  1. 無(wú)需項(xiàng)目根目錄有 .git 文件夾：
    該插件會(huì)在部署時(shí)自動(dòng)在 public 目錄初始化一個(gè)臨時(shí) Git 倉(cāng)庫(kù)，即使你的 Hexo 項(xiàng)目根目錄沒(méi)有 .git 文件夾，也能正常將生成的靜態(tài)文件推送到 GitHub。這意味著你可以將 Hexo 項(xiàng)目和生成的網(wǎng)站文件分開(kāi)管理。

  2. 只操作 public 目錄：
    即使你的 Hexo 項(xiàng)目本身就是一個(gè) Git 倉(cāng)庫(kù)（根目錄有 .git 文件夾），hexo d 命令也只會(huì)關(guān)注 public 目錄下的內(nèi)容。它會(huì)將 public 目錄中的文件作為獨(dú)立的 Git 倉(cāng)庫(kù)進(jìn)行操作，不會(huì)影響你項(xiàng)目根目錄的 Git 歷史。

這就是為什么無(wú)論你的 Hexo 項(xiàng)目是否是 Git 倉(cāng)庫(kù)，都能通過(guò) hexo d 命令輕松部署。

</div>

3. 一鍵部署

輸入以下命令，把你的博客部署到GitHub Pages：

hexo clean # 清空 public 目錄
hexo g # 生成靜態(tài)文件到 public 目錄
hexo d # 將已生成的 public 目錄內(nèi)容部署到 Git 倉(cāng)庫(kù)

稍等片刻，部署完成后，你就可以通過(guò)https://你的用戶(hù)名.github.io訪(fǎng)問(wèn)你的網(wǎng)站啦！
作為參考，你可以訪(fǎng)問(wèn)我的個(gè)人網(wǎng)站（同樣通過(guò) Hexo + GitHub Pages 搭建）：https://zmyai.github.io/

第六步：更換主題，讓你的網(wǎng)站更炫酷

Hexo默認(rèn)的主題比較樸素，我們可以換成更漂亮的主題。這里以"next"主題為例：

  1. 輸入以下命令，從github 克隆 next主題到themes/next文件夾中：
git clone git@github.com:next-theme/hexo-theme-next.git themes/next
  1. 修改 Hexo 的 _config.yml（站點(diǎn)配置文件，不是主題的 _config.yml）文件，把theme字段改成next：
theme: next
  1. 復(fù)制主題配置文件：
    • 找到node_modules/hexo-theme-next/_config.yml文件
    • 把它復(fù)制到博客目錄下的themes文件夾中（注意：不是themes/next目錄）
  2. 清除緩存并重新生成：
hexo clean && hexo g && hexo d

這里放上我自定義后的博客主題：

next主題

可選：將 Hexo 項(xiàng)目源代碼托管到 GitHub

如果想要將 Hexo 項(xiàng)目源代碼部署到 GitHub 倉(cāng)庫(kù)，需要

  1. 先將 Hexo 項(xiàng)目初始化為 Git 倉(cāng)庫(kù)
  2. 提交所有文件到本地倉(cāng)庫(kù)
  3. 添加遠(yuǎn)程倉(cāng)庫(kù)（注意：遠(yuǎn)程倉(cāng)庫(kù)是保存項(xiàng)目源代碼的倉(cāng)庫(kù)，不是上面的你的用戶(hù)名.github.io倉(cāng)庫(kù)，需要提前創(chuàng)建好）
  4. 推送本地倉(cāng)庫(kù)到遠(yuǎn)程倉(cāng)庫(kù)
git init # 將 Hexo 項(xiàng)目初始化為 Git 倉(cāng)庫(kù)
git add . # 添加所有文件到暫存區(qū)
git commit -m "Initial commit" # 提交所有文件到本地倉(cāng)庫(kù)
git remote add origin git@github.com:你的用戶(hù)名/保存項(xiàng)目源代碼的倉(cāng)庫(kù)名.git # 添加遠(yuǎn)程倉(cāng)庫(kù)
git push -u origin master # 推送本地倉(cāng)庫(kù)到遠(yuǎn)程倉(cāng)庫(kù)

高級(jí)技巧1：綁定獨(dú)立域名

雖然GitHub提供了免費(fèi)的二級(jí)域名，但如果你想更專(zhuān)業(yè)一點(diǎn)，可以綁定自己的域名。

1. 購(gòu)買(mǎi)域名

可以在騰訊云、阿里云等平臺(tái)購(gòu)買(mǎi)域名，價(jià)格通常在幾十元一年。

2. 配置DNS解析

登錄你的域名提供商后臺(tái)，添加兩條DNS記錄：

  • A記錄：主機(jī)記錄@，指向185.199.108.153（GitHub Pages的IP地址）
  • CNAME記錄：主機(jī)記錄www，指向你的用戶(hù)名.github.io

3. 在GitHub設(shè)置域名

  1. 在你的GitHub倉(cāng)庫(kù)中，點(diǎn)擊"Settings" -> "Pages"
  2. 在"Custom domain"中輸入你的域名，點(diǎn)擊"Save"
  3. 在博客目錄下創(chuàng)建一個(gè)CNAME文件（無(wú)后綴），里面寫(xiě)上你的域名
  4. 重新部署博客：
hexo clean && hexo g && hexo d

高級(jí)技巧2：使用更高級(jí)的Markdown渲染器

Hexo默認(rèn)的Markdown渲染器功能有限，我們可以換成hexo-renderer-markdown-it，它支持更多Markdown語(yǔ)法和功能。

1. 卸載默認(rèn)渲染器，安裝新渲染器

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-markdown-it --save

2. 安裝必備插件

npm install markdown-it --save
npm install markdown-it-emoji --save # 表情符號(hào)
npm install markdown-it-mark --save # 高亮
npm install markdown-it-sub --save # 上標(biāo)
npm install markdown-it-sup --save # 下標(biāo)
npm install markdown-it-checkbox --save  # 任務(wù)列表
npm install markdown-it-expandable --save  # 折疊/展開(kāi)內(nèi)容
npm install markdown-it-container --save  # 自定義容器

3. 配置渲染器

修改博客目錄下的_config.yml文件，添加以下配置：

markdown:
  plugins:
    - markdown-it-checkbox  # 任務(wù)列表
    - markdown-it-emoji  # 表情支持
    - markdown-it-expandable  # 折疊/展開(kāi)內(nèi)容
    - markdown-it-mark  # 支持 ==高亮==
    - markdown-it-sub    # 下標(biāo)（如 H~2~O）
    - markdown-it-sup   # 上標(biāo)（如 x^2^）

4. 享受新功能

現(xiàn)在你可以使用更多高級(jí)Markdown語(yǔ)法了，比如：

  • 表情符號(hào)：:) 顯示為 :)
  • 下標(biāo)：H~2~O 顯示為 H2O
  • 上標(biāo)：X^2^ 顯示為 X2
  • 高亮：==高亮== 顯示為 ==高亮==
  • 任務(wù)列表：- [x] 已完成任務(wù) - [ ] 未完成任務(wù)
  • 折疊內(nèi)容：使用+++包裹的內(nèi)容可以折疊/展開(kāi)
  • 自定義容器：::: tip 可以創(chuàng)建提示框

總結(jié)

恭喜你！按照這個(gè)教程，你已經(jīng)成功搭建了一個(gè)屬于自己的個(gè)人網(wǎng)站?；仡櫼幌拢覀冏隽诉@些事：

  1. 注冊(cè)GitHub賬號(hào)，創(chuàng)建網(wǎng)站倉(cāng)庫(kù)
  2. 安裝Git和Node.js
  3. 配置SSH密鑰
  4. 安裝并初始化Hexo
  5. 部署網(wǎng)站到GitHub Pages
  6. 更換主題
  7. 將Hexo項(xiàng)目源代碼托管到GitHub（額外保護(hù)你的項(xiàng)目代碼）
  8. 學(xué)習(xí)了綁定獨(dú)立域名和使用高級(jí)Markdown渲染器的技巧

是不是比你想象的簡(jiǎn)單多了？現(xiàn)在，你可以開(kāi)始在你的網(wǎng)站上寫(xiě)博客、分享知識(shí)、展示作品了?？烊ピ囋嚢桑?/p>

如果你在搭建過(guò)程中遇到問(wèn)題，歡迎在評(píng)論區(qū)留言，我會(huì)盡力幫助你解決。

?? 行動(dòng)起來(lái)，擁有一個(gè)自己的網(wǎng)站，開(kāi)啟你的線(xiàn)上影響力之旅！

本文由博客一文多發(fā)平臺(tái) OpenWrite 發(fā)布！

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

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

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