寫這篇文章的原因是在網上看了很多的教程，踩了不少的坑，更多的白費了很多功夫，也沒找到一篇從頭到尾完整有效的個人建站方法。

有些教程年代久遠，有些教程極為繁瑣，有些教程壓根跑不通。

為了方便自己，做個記錄，也方便大家，在這個人人都可以發聲的時代，又感覺人人的喉嚨都被扼住了。

雖然大家在各個媒體平臺都有自己的賬號，但是給自己留一份自己的自留地，貌似也不會是什么壞事。

這也是我建個人博客的最主要理由，因為有些東西因為這樣的或者那樣的原因，無法在公域平臺發布，那么自己的博客網站，總可以容納的下。

建立個人博客的兩個方法

這是一套非常簡單的方法，我希望可以讓每一個人都可以照著這套方法建立自己的博客。

總共分為兩個版本：

第一個版本為通用版本，利用云服務器的host功能，一個月僅需要花費一杯咖啡的錢。

第二個版本為github版本，利用github pages的免費host和自動部署功能，不需要花一分錢就可以擁有自己的博客。

視頻版本：

如何零基礎零費用的在30分鐘內創建一個專屬于你的個人博客 - 簡單快捷到建議人手一個

前置準備

Mac 和 linux

需要：homebrew，git包管理，Node.js, vscode(推薦)

?

homebrew安裝：直接命令行輸入

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

?

git包管理：直接命令行輸入

brew install git

?

Node.js: 下載安裝包后按照默認設置安裝

Node.js下載鏈接

Windows

需要：git包管理，hugo預編譯文件，Node.js, vscode(推薦)

?

git包管理：點擊下面鏈接下載后安裝

git包管理下載鏈接

?

Node.js: 下載安裝包后按照默認設置安裝

Node.js下載鏈接

準備 hugo 環境

我們用hugo來寫個人博客，它是一個非常快捷和友好的博客框架。

mac 安裝方法：命令行種輸入

brew install hugo

Windows安裝方法

比mac要麻煩點，但是安裝方法很詳細。

windows版本的安裝方法

學會在命令行中創建blog

windows：在搜索欄中輸入cmd或者命令行

mac：找到Terminal

創建一個新的blog

使用命令hugo new site來創建一個博客，pingfan-blog這個名字可以根據自己的需要改

hugo new site pingfan-blog

進入剛剛創建好的博客文件夾中

在命令行中使用cd命令

cd pingfan-blog

給博客加個皮膚，一次復制+粘貼三行代碼到命令行中

第一行：把當前目錄進行github倉庫的初始化

git init

第二行：下載anatole主題，并存放在themes文件夾中

git submodule add https://github.com/lxndrblz/anatole.git themes/anatole

第三行：把主題改為anatole

echo theme = "anatole" >> config.toml

寫第一篇blog

hugo new + aaa/bbb.md， aaa指代的是某一個文件夾，如果你想寫美食和電影兩種，那就是[美食/第一篇美食.md]，或者[電影/第一篇電影.md]，盡量都用字母，其次一定要加.md

hugo new life/first_day.md

運行下博客看是否可行

hugo server

出現以下界面后，打開任意瀏覽器，輸入http://localhost:1313 即可查看。

一般是因為1313端口被占用了，可以用它生成的別的網址；或者用kill -9 $(lsof -ti:1313)在命令行把1313端口重新釋放出來

瀏覽器中出現如下界面說明你成功了

生成靜態文件，準備進一步托管

hugo -D

你可以去自己的文件目錄中看到，public文件夾里面已經多了很多文件出來。

靜態網站托管服務

使用云服務進行托管，這一步針對是不能訪問github的同學，那么你必須得用一款云服務器進行托管。

1. 首先你得有一個云服務空間，這里我使用的是騰訊云的cloudbase

這里我使用的是騰訊云的cloudbase，可以通過下面這個鏈接，選擇新用戶體驗券后可以免費體驗一個月。

騰訊云cloudbase免費試用一個月鏈接

添加成功后點擊【控制臺->云產品->cloudbase】，點開可以看到如下內容。

2. 創建好后得到了一個環境ID，待會兒要用到

3. 在本地安裝Node.js

網址為：https://nodejs.org/en/ windows和mac按類型下載，下載完成后安裝即可。

在命令行中輸入以下驗證是否安裝成功

npm -v

出現類似于6.14.13就表示成功了。

4. 打開命令行，輸入以下命令安裝 cloudbase cli

npm install -g @cloudbase/cli

5. 登錄云開發

tcb login

6. 在彈出的頁面中單擊確認授權進行授權

7. 執行以下命令，把public文件夾部署到云服務器上（把EnvID換成剛剛的環境ID）

cloudbase hosting deploy ./public -e EnvID

8.登錄云開發控制臺

進入靜態網站托管頁面，可以找到默認的域名，單擊域名，就可以看到你的博客已經部署成功了。

下面就是自動生成的域名

出現如下界面表明創建成功了

使用Github進行托管

這個方法是給可以訪問github的同學準備的，首先你需要新建一個github倉庫，名字無所謂。

然后在命令后中進行操作

1.在命令行中進行git初始化

這步我們已經做過了，當然了，再做一次也沒關系

git init

2. 檢查是否有改變

git status

3. 提交到暫存區

git add .

4. 交到版本庫

git commit -m "msg"

5. 創建分支

git branch -M main git remote add origin https://.....git

6. 推送到遠程倉庫

git push -u origin main

7. 添加gh-pages.yml文件

新建一個文件，在pingfan-blog目錄下，名稱為**.github**,然后在.github文件夾下新建一個文件夾workflows，在workflows文件夾下新建一個文件叫gh-pages.yml

總的路徑為pingfan-blog/.github/workflows/gh-pages.yml

在gh-pages.yml輸入以下內容后保存。

name: github pageson:push:branches:- main # Set a branch to deploypull_request:jobs:deploy:runs-on: ubuntu-20.04steps:- uses: actions/checkout@v2with:submodules: true # Fetch Hugo themes (true OR recursive)fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod- name: Setup Hugouses: peaceiris/actions-hugo@v2with:hugo-version: 'latest'# extended: true- name: Buildrun: hugo --minify- name: Deployuses: peaceiris/actions-gh-pages@v3if: github.ref == 'refs/heads/main'with:github_token: ${{ secrets.GITHUB_TOKEN }}publish_dir: ./public

8. 重新把修改過的文件上傳到github上

再走一遍

git status git add . git commit -m "add yml file" git push

9. 成功的話，我們會發現所有的內容都上傳到github了

10. 找到剛剛的github倉庫，點擊Actions，就可以看到我們的網站部署成功了

11. 修改branch為gh-pages，位置在settings->Pages那里

11. 最后一步，修改hugo的baseURL

在github的倉庫中找到Settings->Pages，找到為https://******.github.io/pingfan-blog

復制粘貼，打開config.toml，然后替換掉原先的。

12. 再走一遍

git status git add . git commit -m "revise config" git push

13. 打開github，點開pages，點擊sourse，選擇gh-pages，結束

我這個是換成了我自己購買的域名，所以會顯示的不一樣，你也可以買一個自己喜歡的域名，而不是默認的域名。

這是我的域名。

如果有問題，可以加這個群，有空我會看的。
群號：339309252
或者掃這個：QQ群

總結

以上是生活随笔為你收集整理的如何零基础零费用的在30分钟内用hugo+github pages创建一个专属于你的个人博客 - 简单快捷到建议人手一个的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。