0成本，跨境電商小白也能擁有自己的獨(dú)立站（GitHub+Hexo搭建）

時(shí)間：2023-04-23 11:24:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-04-23 11:24:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

0成本，跨境電商小白也能擁有自己的獨(dú)立站（GitHub+Hexo搭建）：今天介紹的是不花一分錢(qián)也能擁有自己的獨(dú)立站，不需要服務(wù)器，是一種完全免費(fèi)的建站方式，借助的是GitHub代碼托管平臺(tái)和Hexo建站模板，主要分為以下幾部分：

• 常見(jiàn)問(wèn)題
• GitHub賬號(hào)注冊(cè)登錄及使用教程
• Hexo環(huán)境及模板安裝
• 更改Hexo主題，搭建個(gè)人獨(dú)立站
  

第一部分、注意事項(xiàng)

這部分我先寫(xiě)在前面，不太懂沒(méi)關(guān)系，看到后面遇到問(wèn)題時(shí)，再回來(lái)看一下即可。

1、hexo+GitHub建站的邏輯

整個(gè)流程就是本地將 *.md 渲染成靜態(tài)文件，然后Git推送到GitHub的repository，再同步網(wǎng)站根目錄。

2、有的時(shí)候有一些插件安裝不了，可以試一下淘寶鏡像安裝，方法如下：（前兩行的意思是注冊(cè)一個(gè)淘寶號(hào)，最后一行的是插件安裝）

淘寶鏡像安裝

$ npm install -g cnpm--registry=https://registry.npm.taobao.org

$ npm config set registry https://registry.npm.taobao.org

$ cnpm install hexo-renderer-sass --save

3、配置文件_config.yml有兩個(gè)，本文所指的博客配置文件_config.yml，路徑為E:/username/_config.yml；主題配置文件_config.yml，路徑為E:/username/themes/matery/_config.yml 。

4、Git控制臺(tái)輸入命令時(shí)，要注意是如下形式的，如果不是，則按“Ctrl+C”停止當(dāng)前運(yùn)行，然后再輸入命令即可。

5、在git控制臺(tái)輸入命令，hexo g ，然后再輸入命令 hexo s ，瀏覽器打開(kāi) http://localhost:4000/ ，就能看到我們安裝好的主題了，“Ctrl+C”結(jié)束本地運(yùn)行，輸入命令 hexo d ，可上傳到GitHub上，通過(guò)域名可直接訪問(wèn)。（注：這幾個(gè)命令以后會(huì)經(jīng)常用到，一般本地運(yùn)行是hexo s，修改之后，最后要生成頁(yè)面后再上傳至GitHub，命令是 hexo g -d）

6、大部分運(yùn)行Git控制臺(tái)都是在根目錄下新建的文件夾內(nèi)進(jìn)行的。

第二部分：GitHub賬號(hào)注冊(cè)登錄及使用教程

一、注冊(cè)并登陸GitHub賬號(hào)（推薦使用谷歌瀏覽器）

注冊(cè)網(wǎng)址： https://github.com/

注意：不要用qq郵箱，收不到認(rèn)證郵件。

二、在GitHub上新建一個(gè)倉(cāng)庫(kù)

1、登陸新注冊(cè)的GitHub賬號(hào)后，點(diǎn)擊網(wǎng)頁(yè)右上角的「New repository」

2、填寫(xiě)倉(cāng)庫(kù)名，格式必須是「你的 http://username.github.io」才能被識(shí)別（也就是一個(gè)郵箱只能有一個(gè)倉(cāng)庫(kù)）

3、綁定自己的域名，之前直接輸入“ http://username.github.io”是可以訪問(wèn)的，不知道是不是最近服務(wù)器又被偷了，不能訪問(wèn)了，但是綁定自己的域名是可以訪問(wèn)的，參照之前的文章-免費(fèi)一級(jí)域名注冊(cè)申請(qǐng)及域名解析教程，在GitHub綁定域名方法如下：

①、進(jìn)入你的倉(cāng)庫(kù)，點(diǎn)擊最后的設(shè)置。

拉到后面，看到custom domain，填入你的域名，加不加www，都可以。

第三部分：Hexo環(huán)境及模板安裝，搭建獨(dú)立站

1、下載安裝Notepad++，網(wǎng)上隨便下載一個(gè)就好，

下載地址： https://notepad-plus-plus.org/downloads/

2、安裝Node.js軟件（版本至少是nodejs 6.9，最好安裝最新版本的），就像正常安裝軟件一樣，都是默認(rèn)選項(xiàng)，一直點(diǎn)下一步，完成安裝。

下載網(wǎng)址： https://nodejs.org/en/

最后安裝好之后，按Win+R打開(kāi)本機(jī)“運(yùn)行”，輸入cmd，點(diǎn)擊確定，輸入node -v和npm -v，如果出現(xiàn)版本號(hào)，那么就安裝成功了。

3、安裝Git軟件

下載地址： https://github.com/waylau/git-for-win

在根目錄下點(diǎn)擊鼠標(biāo)右鍵“Git Bash Here”，輸入命令 "git --version"，出現(xiàn)版本號(hào)，表明安裝成功。

4、安裝Hexo

在根目錄下新建一個(gè)文件夾（名稱(chēng)為英文，簡(jiǎn)短一些，我新建的名稱(chēng)是username），點(diǎn)擊鼠標(biāo)右鍵“Git Bash Here”， 打開(kāi)git的控制臺(tái)窗口，以后我們所有的操作都在Git控制臺(tái)進(jìn)行，就不要用Windows自帶的控制臺(tái)了。

官方網(wǎng)址： https://hexo.io/

定位到該目錄下，輸入 npm install hexo-cli -g，安裝Hexo（鼠標(biāo)右鍵粘貼）。會(huì)有幾個(gè)報(bào)錯(cuò)，無(wú)視它就行，出現(xiàn)如下信息，表示安裝成功了。

初始化文件夾，輸入 hexo init <目錄名>，我這里輸入的就是hexo init username，等待一會(huì)兒。

最后出現(xiàn)“INFO Start blogging with Hexo!”表明安裝成功。可以看到之前的空文件夾，已經(jīng)有文件了。

輸入 cd <文件夾名稱(chēng)>，切換到文件夾的控制臺(tái)，我這里輸入的是 cd username，可以看到上面的路徑，從根目錄變成了文件夾的路徑，

然后輸入npm install 繼續(xù)安裝。

目前已經(jīng)基本安裝好了， 輸入“ hexo g”生成靜態(tài)頁(yè)面，然后再輸入“hexo s”，運(yùn)行一下看一下，瀏覽器輸入下面紅框內(nèi)的網(wǎng)址，注意直接用鼠標(biāo)右鍵復(fù)制，不要按“Ctrl+C”，如果按了“Ctrl+C”，就直接停止了，看不到結(jié)果了。

瀏覽器內(nèi)輸入 http://localhost:4000/，看到的就是安裝好的主題。

5、將博客發(fā)布到GitHub Page上

①、按“Ctrl+C”，先停止本地瀏覽，再安裝一個(gè)插件，在命令行輸入 npm install hexo-deployer-git --save （注意git后面有一個(gè)空格）。

②、將本地Git和GitHub關(guān)聯(lián)起來(lái)，命令行輸入 ssh-keygen -t rsa -C "GitHub注冊(cè)時(shí)的郵箱"，一直回車(chē)三次，生成SSH密鑰。

開(kāi)始，點(diǎn)擊，打開(kāi)個(gè)人文件夾，找到.SSH文件夾，鼠標(biāo)右鍵，打開(kāi) id_rsa.pub 文件夾，建議使用Notepad++打開(kāi)，把密鑰全部復(fù)制

回到GitHub，點(diǎn)擊頭像，點(diǎn)擊Settings。

選擇SSH and GPG keys

點(diǎn)擊 New SSH key

粘貼剛才的密鑰，title可以隨意填寫(xiě)，點(diǎn)擊Add SSH key。

然后回命令行，檢查是否連接成功。

輸入命令， ssh -T git@github.com 等一會(huì)兒，出現(xiàn)如下界面，表明連接成功。

命令hexo g 是生成靜態(tài)網(wǎng)頁(yè)， 命令 hexo d 是發(fā)布到GitHub，連在一起的命令是 hexo g -d ，表示生成靜態(tài)網(wǎng)頁(yè)并發(fā)布到GitHub上。

③、修改一下hexo站點(diǎn)的配置文件，打開(kāi)博客配置文件。

拉到最后面，添加幾行語(yǔ)言，注意，英文冒號(hào)，且后面有一個(gè)空格，username要替換成你的GitHub用戶(hù)名。

type: git

repo: git@github.com:username/username.github.io.git

branch: master

④、最后把URL換成你的GitHub網(wǎng)址，http://username.github.io

⑤、點(diǎn)擊保存，Git控制臺(tái)輸入命令 hexo g 生成靜態(tài)網(wǎng)頁(yè)。

第四部分：更改Hexo主題，搭建個(gè)人獨(dú)立站

一、下載主題

1、hexo默認(rèn)的主題是“l(fā)andscape”，比較簡(jiǎn)潔，功能也很強(qiáng)大，但是還有更多的主題可供大家選擇。

hexo主題官網(wǎng)下載地址： https://hexo.io/themes/

2、比較常用的是NEXT主題，搜索框搜索 “next”，點(diǎn)擊文字，向下拉，就可以看到下載方法。但是我個(gè)人比較喜歡的是另一個(gè)主題，名字是“matery”。每個(gè)主題有不同的安裝方法，和需要安裝的插件，最好選擇那種更新日期比較近的，說(shuō)明文檔寫(xiě)的比較詳細(xì)的。

3、進(jìn)入主題說(shuō)明頁(yè)面，里面有下載方法介紹，可以按照這個(gè)方法下載，但是國(guó)內(nèi)下載速度較慢，其實(shí)也可以直接解壓復(fù)制文檔，到剛才的文件夾里的theme文件夾。

二、修改配置文件

1、文件夾重命名為“matery”

2、修改博客配置文件，_config.yml，用Notepad++打開(kāi)，“Ctrl+F”搜索“theme”，把下面的landscape改成，主題文件名，matery。

3、修改語(yǔ)言

修改原目錄下面的配置文件，_config.yml，用Notepad++打開(kāi)，“Ctrl+F”搜索“l(fā)anguage”，這里默認(rèn)是en，如果要改成中文的，輸入“zh-CN”。

4、修改網(wǎng)站的基本信息

修改原目錄下面的配置文件，_config.yml，用Notepad++打開(kāi)，“Ctrl+F”搜索“site”，包括標(biāo)題，描述，關(guān)鍵字，作者，按照自己的要求修改，一般“標(biāo)題，描述，關(guān)鍵字”的設(shè)置都和網(wǎng)站之后的SEO優(yōu)化相關(guān)。

5、安裝主題需要的基礎(chǔ)插件

這個(gè)要說(shuō)明的一點(diǎn)是，不同的主題需要安裝的插件不同，一般說(shuō)明文檔里都會(huì)告訴方法，按照說(shuō)明一步一步進(jìn)行就好，這個(gè)主題就比較簡(jiǎn)單，不需要安裝任何插件。

6、生成頁(yè)面，運(yùn)行主題。

其實(shí)還有其他的東西需要修改，但是我們先運(yùn)行一下主題，看一下是否安裝成功。

在Git控制臺(tái)輸入命令，hexo g ，然后再輸入命令 hexo s ，瀏覽器打開(kāi) http://localhost:4000/ ，就能看到我們安裝好的主題了，“Ctrl+C”結(jié)束本地運(yùn)行，輸入命令 hexo d ，可上傳到GitHub上，通過(guò)域名可直接訪問(wèn)。（注：這幾個(gè)命令以后會(huì)經(jīng)常用到，一般本地運(yùn)行是hexo s，修改之后，最后要生成頁(yè)面后再上傳至GitHub，命令是 hexo g -d）

7、Matery主題修改

（1）、文件夾介紹

主題修改的部分很多，一般都在主題的文件夾內(nèi)，簡(jiǎn)單介紹一下這幾個(gè)文件夾都是干什么，因?yàn)槲乙膊皇菍?zhuān)業(yè)的，一些東西不是很懂，只是能達(dá)到我想要的效果就可以了。

①、languages文件夾：是這個(gè)主題可以使用的語(yǔ)言，之前在博客配置文件更改的語(yǔ)言，就是和這里面的文件名稱(chēng)是對(duì)應(yīng)的。

②、layout文件夾：顧名思義，和各種布局形式相關(guān)，之后更改的時(shí)候是要用到的。

③、source文件夾：這里面的文件夾是啥意思我也不太懂，主要用到的就是media文件夾，存放的是網(wǎng)站需要用到的圖片。

④、_config.yml文件：是主題配置文件，更改主題的功能都在這里修改的。

其實(shí)我修改這個(gè)主題，主要用到的是layout文件夾和_config.yml文件。

（2）、部分主題修改，主要修改三個(gè)部分：菜單欄、頁(yè)腳、社交媒體鏈接。

①、菜單欄：菜單欄現(xiàn)在有7個(gè)，我目前不需要這么多，只需要“主頁(yè)、tags、about”，我需要把其他幾個(gè)刪除。

a、用Notepad++打開(kāi)這個(gè)文件，navigation.ejs，把不想要的直接刪除，然后保存。

b、用Notepad++打開(kāi)主題配置文件 _config.yml，把菜單欄中不想要的前面加“#”，注釋掉，點(diǎn)擊保存，Git控制臺(tái)輸入命令“hexo s”，本地運(yùn)行一下，打開(kāi) http://localhost:4000/，可以看到效果。

②、頁(yè)腳部分

修改頁(yè)腳部分的文件位置： /layout/_partial/footer.ejs，不想要的部分自己刪除一下吧，我是覺(jué)得大部分都沒(méi)啥用，我就都給刪除了。

③、社交媒體部分

a、修改文件“social-link.ejs”，修改后點(diǎn)擊保存。圖標(biāo)更改支持fontawesome，具體使用方法自己百度一下。

網(wǎng)址：https://fontawesome.com/

b、修改主題配置文件，_config.yml，用Notepad++打開(kāi)，“Ctrl+F”搜索“social”，把不想要的部分直接用“#”注釋掉。

④、其他功能

這個(gè)主題的功能還是很多的，都在主題配置文件/themes/matery/_config.yml里，大家可以一個(gè)一個(gè)仔細(xì)看看，例如打賞功能、播放音樂(lè)視頻功能、在線聊天等。這里需要提到的是這個(gè)按鈕，不知道大家是什么需求，反正我是不太需要這個(gè)，我直接false了，需要修改兩處，一個(gè)是indexbtn，另一個(gè)是githubLink。

8、安裝功能插件（都是在文件夾內(nèi)的Git控制臺(tái)進(jìn)行的）

①、Search插件

a、安裝插件，根目錄下命令行輸入

npm install hexo-generator-searchdb --save

b、編輯博客配置文件，新增以下內(nèi)容到任意位置

#Search

search:

path: search.xml

field: post

format: html

limit: 10000

c、編輯主題配置文件，文件最下方添加如下代碼

# Local search

local_search:

enable: true

②、RSS訂閱插件

安裝插件hexo-generator-feed插件

根目錄下命令行輸入 npm install hexo-generator-feed --save

安裝插件，出現(xiàn)這個(gè)，表明安裝成功。

③、網(wǎng)站地圖插件

a、安裝插件

分別安裝google和百度插件

npm install hexo-generator-sitemap --save

npm install hexo-generator-baidu-sitemap --save

b、在博客目錄的_config.yml中添加如下代碼:

# 自動(dòng)生成sitemap

sitemap:

path: sitemap.xml

baidusitemap:

path: baidusitemap.xml

④、Markdown編輯器

a、安裝hexo-myadmin的插件

npm i hexo-myadmin --save

b、輸入“hexo s”運(yùn)行hexo，打開(kāi)瀏覽器輸入“http://localhost:4000/admin”，現(xiàn)在就可以正常使用, 打開(kāi)hexo-admin界面。

c、這個(gè)是編輯文章用的，hexo支持Markdown編輯器，這個(gè)可以不用代碼，直接寫(xiě)文章，改字體，插入圖片鏈接等。

9、生成page和發(fā)布文章

①、生成tags頁(yè)面

a、Git控制臺(tái)輸入命令“hexo new page "tags"”

b、編輯新頁(yè)面文件，文件路徑 /source/tags/index.md

---

title: tags

date: 2018-09-10 18:23:38

type: "tags"

layout: "tags"

---

②、生成about頁(yè)面

a、Git控制臺(tái)輸入命令“hexo new page "about"”

b、編輯新頁(yè)面文件，文件路徑 /source/about/index.md

---

title: about

date: 2018-09-30 17:25:30

type: "about"

layout: "about"

---

③、生成404頁(yè)面

文件路徑 /source/404.md，該路徑下，新建一個(gè)404.md頁(yè)面，把以下代碼復(fù)制粘貼過(guò)去。

---

title: 404

date: 2020-05-30 00:00:00

type: "404"

layout: "404"

description: "Cannot find the page you want :("

---

④、發(fā)布新文章

Git控制臺(tái)輸入“hexo s”，打開(kāi)瀏覽器輸入“http://localhost:4000/admin”，點(diǎn)擊“new post”，文章編輯完了，直接點(diǎn)擊“publish”發(fā)布即可。

PS：小工具推薦

• 圖片壓縮工具：有一些圖片是需要壓縮的，壓縮后利于網(wǎng)頁(yè)打開(kāi)速度，推薦的免費(fèi)壓縮軟件Caesium，一般圖片的壓縮率可達(dá)70%左右，回復(fù)“建站”，可下載。
• 偽原創(chuàng)生成工具：Article Spinner（簡(jiǎn)單同義詞替換，推薦，免費(fèi)的軟件偽原創(chuàng)能力有限），回復(fù)“建站”，可下載。
• 語(yǔ)法檢查工具： 免費(fèi)在線語(yǔ)法檢查修改工具，網(wǎng)址：https://app.grammarly.com/

10、 robots.txt 文件

作用： robots文件是搜索引擎爬蟲(chóng)爬行網(wǎng)站第一個(gè)訪問(wèn)的文件，通過(guò)robots協(xié)議告訴搜索引擎，我們網(wǎng)站的哪些內(nèi)容可以訪問(wèn)，哪些內(nèi)容不能訪問(wèn)。

生成工具：https://tool.chinaz.com/robots/

參考文章：https://blog.csdn.net/fanghua_vip/article/details/79535639

方法：在public文件夾中新建一個(gè)robots.txt 文件。

11、谷歌站長(zhǎng)工具

到谷歌站長(zhǎng)工具中注冊(cè)賬號(hào)，按照步驟一步一步的進(jìn)行就可以了，有不同的驗(yàn)證方式，最后提交一下網(wǎng)站地圖即可，可能會(huì)顯示無(wú)法獲取，不要擔(dān)心，這個(gè)需要時(shí)間，一般一到兩天就可以成功了。

站長(zhǎng)工具地址：https://www.google.com/webmasters/tools/submit-url?hl=zh-CN




本文來(lái)源：網(wǎng)絡(luò)整理

參考資料：

【不定期更新】最新從零開(kāi)始Github Pages +Hexo 搭建個(gè)人靜態(tài)博客

https://b23.tv/BV1Lt411R78H/p1

注：視頻建議2倍速觀看，本來(lái)他是有一個(gè)博客的，但是不知道為什么打不開(kāi)了，博客地址：https://lixint.github.io/hexo-blog.html

推薦閱讀

跨境電商小白也能擁有自己的獨(dú)立站（服務(wù)器+寶塔+WordPress建站）

TikTok賬號(hào)注冊(cè)教程及基礎(chǔ)運(yùn)營(yíng)教程

電腦端+手機(jī)端SSR軟件下載及使用教程

打造學(xué)習(xí)型亞馬遜運(yùn)營(yíng)團(tuán)隊(duì)，必備的4種思維習(xí)慣

亞馬遜最好用的免費(fèi)工具推薦——運(yùn)營(yíng)必備

亞馬遜廣告的優(yōu)化技巧，怎么做亞馬遜廣告？

亞馬遜廣告優(yōu)化技巧——如何利用數(shù)據(jù)透視表優(yōu)化亞馬遜廣告？

亞馬遜廣告優(yōu)化技巧——如何量化分析亞馬遜廣告效果？

亞馬遜廣告從來(lái)沒(méi)有人告訴你的常識(shí)

亞馬遜廣告從來(lái)沒(méi)有人告訴你的常識(shí)（二）

亞馬遜廣告怎么打？十招告別超高ACOS！

海外疫情爆發(fā)，亞馬遜賣(mài)家選品策略