一小時搭建完自己的個人網(wǎng)站

2021-09-27    分類： 網(wǎng)站建設(shè)

擁有自己的個人網(wǎng)站一直是我的一個目標(biāo)。

在網(wǎng)上看了很多方法之后我最終選擇了GitHub Pages + Hexo這條技術(shù)路線，原因有兩點：

  • 完全免費，學(xué)生黨沒有多少錢。

  • 比較方便，有現(xiàn)成的框架可用。

整個搭建過程快的話半小時就可以搞定。

搭建完成后大概是這樣子的：青羽的博客

1. 準(zhǔn)備環(huán)境

準(zhǔn)備一個GitHub賬號：GitHub

新建一個Repositories，Repository name填 你的GitHub用戶名.github.io

一小時搭建完自己的個人網(wǎng)站

下載并安裝NodeJS：Node.js

下載并安裝Git for Windows：Git for Windows

2. 配置Git

鼠標(biāo)右鍵打開Git Bash：

個人網(wǎng)站

輸入命令配置用戶名和郵箱信息：

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

生成ssh密鑰文件：

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

默認不設(shè)置密碼，直接回車就行。

搭建完個人網(wǎng)站

用文本編輯器打開生成的id_rsa.pub文件，Crtl+a，Ctrl+C復(fù)制全部內(nèi)容。

打開GitHub的SSH設(shè)置頁面：SSH and GPG keys

New SSH key，Title任取，Key粘貼剛剛復(fù)制的字符串，add SSH key

3. 配置Hexo

Hexo是一個博客框架。接下來，開始安裝Hexo。

選定一個文件夾作為存放博客文件的目錄，在選定的文件夾內(nèi)右鍵打開Git Bash，輸入命令：

npm install hexo-cli -g

等待安裝完成后，輸入：

hexo init blog

這里的blog是用戶自己取的一個站點目錄名字。

初始化完成后進入站點目錄并安裝依賴：

cd blognpm install

到這一步，本地博客算是搭建好了，測試一下：

hexo s

s是server的縮寫，表示啟動本地服務(wù)器。默認情況下，訪問網(wǎng)址是：http://localhost:4000/

如果成功的話可以看見官方的默認頁面：

搭建個人網(wǎng)站

4. 部署網(wǎng)站

在站點目錄下可以看到有如下文件：

搭建個人網(wǎng)站

其中_config.yml為站點配置文件，用文本編輯器打開，Crtl+F查找 url 字段，修改為：

url: https://你的GitHub用戶名.github.io/

再翻到最后找到 deploy 字段，修改為：

deploy: type: git repo: https://github.com/你的GitHub用戶名/你的GitHub用戶名.github.io.git branch: master

上面的 repo 字段的值可以直接從GitHub倉庫復(fù)制：

搭建完自己的個人網(wǎng)站

部署之前要先安裝Git部署插件，輸入命令（注意：之后的命令均在站點目錄下執(zhí)行）：

npm install hexo-deployer-git --save

最后，輸入命令：

hexo clean hexo g -d

g是generate的縮寫，表示生成靜態(tài)文件；d是deploy的縮寫，表示部署到網(wǎng)站上。

打開瀏覽器，輸入你的網(wǎng)站地址：https://你的GitHub用戶名.github.io/，就可以看到你的網(wǎng)站已經(jīng)上線了，大功告成！

5. 發(fā)布文章

在命令行中輸入：

hexo n "HelloWorld"

n是new的縮寫，表示新建一篇文章。

就可以看到在source/_posts目錄下多了一個HelloWorld.md文件，這就是一篇文章的源文件了。寫完之后生成、部署即可。

文章使用Markdown寫成，關(guān)于Markdown可參考：Markdown 教程 | 菜鳥教程

要刪除文章的話，直接把源文件刪除即可（確保至少有一篇文章存在，否則可能出錯）。

6. 優(yōu)化網(wǎng)站

1. 更換主題

Hexo有許多好看的主題，這里以我用的NexT主題為例講解怎樣更換主題：

  1. 下載主題：Releases · theme-next/hexo-theme-next

  2. 解壓所下載的壓縮包至站點的 themes 目錄下，并將解壓后的文件夾名稱（hexo-theme-next-x.x.x）更改為 next

  3. 打開站點配置文件_config.yml，找到 theme 字段，并將其值更改為 next ；找到 language 字段，并將其值更改為 zh-CN（在themes/next/languages目錄下可查看主題支持的語言）

  4. 在切換主題之后， 我們最好使用 hexo clean 命令來清除 Hexo 的緩存

在更換了主題之后界面美觀了許多，終于可以舒舒服服地寫文章啦~

但是很不好意思，倘若你的文章里有LaTeX公式或者圖片，你會發(fā)現(xiàn)顯示不正?！?/p>

作為一名技術(shù)宅，文章里怎么可能不用公式不用圖片嘛，這兩個坑必須解決了！

2. 插入LaTeX公式

更換支持LaTeX公式的Markdown渲染器：

npm uninstall hexo-renderer-markednpm install hexo-renderer-kramed --save

打開主題配置文件（themes/next/_config.yml），找到 math 字段，修改為：

math: enable: true per_page: false

至此，LaTeX公式插入問題解決！

3. 插入圖片

首先打開站點配置文件_config.yml，找到 post_asset_folder 字段，并將其值更改為 true ，這樣新建文章的同時Hexo會自動在同目錄下新建一個以文章名命名的空文件夾以方便存放該文章要用到的資源。

安裝一個能上傳本地圖片的插件：

npm install https://github.com/CodeFalling/hexo-asset-image --save

假設(shè)在

+---HelloWorld| +-- 1.jpg| +-- 2.jpg| +-- 3.jpg+---HelloWorld.md

這樣的目錄結(jié)構(gòu)（目錄名和文章名一致）中，在文章源代碼里只要使用形如 ![](HelloWorld/1.jpg) 這樣的語句就可以插入圖片了~

4. 更多

關(guān)于Hexo框架的更多信息請參考：Hexo

關(guān)于NexT主題的更多信息請參考：NexT - Theme for Hexo



標(biāo)題名稱：一小時搭建完自己的個人網(wǎng)站
網(wǎng)址分享：http://www.muchs.cn/news34/128584.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、電子商務(wù)、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化