一小時(shí)搭建完自己的個(gè)人網(wǎng)站
2021-09-27 分類(lèi)： 網(wǎng)站建設(shè)
擁有自己的個(gè)人網(wǎng)站一直是我的一個(gè)目標(biāo)。
在網(wǎng)上看了很多方法之后我最終選擇了GitHub Pages + Hexo這條技術(shù)路線，原因有兩點(diǎn)：
完全免費(fèi)，學(xué)生黨沒(méi)有多少錢(qián)。
比較方便，有現(xiàn)成的框架可用。
整個(gè)搭建過(guò)程快的話半小時(shí)就可以搞定。
搭建完成后大概是這樣子的：青羽的博客
1. 準(zhǔn)備環(huán)境
準(zhǔn)備一個(gè)GitHub賬號(hào)：GitHub
新建一個(gè)Repositories，Repository name填 你的GitHub用戶名.github.io
下載并安裝NodeJS：Node.js
下載并安裝Git for Windows：Git for Windows
2. 配置Git
鼠標(biāo)右鍵打開(kāi)Git Bash：
輸入命令配置用戶名和郵箱信息：
git config --global user.name "你的GitHub用戶名"git config --global user.email "你的GitHub注冊(cè)郵箱"
生成ssh密鑰文件：
ssh-keygen -t rsa -C "你的GitHub注冊(cè)郵箱"
默認(rèn)不設(shè)置密碼，直接回車(chē)就行。
用文本編輯器打開(kāi)生成的id_rsa.pub文件，Crtl+a，Ctrl+C復(fù)制全部?jī)?nèi)容。
打開(kāi)GitHub的SSH設(shè)置頁(yè)面：SSH and GPG keys
New SSH key，Title任取，Key粘貼剛剛復(fù)制的字符串，add SSH key
3. 配置Hexo
Hexo是一個(gè)博客框架。接下來(lái)，開(kāi)始安裝Hexo。
選定一個(gè)文件夾作為存放博客文件的目錄，在選定的文件夾內(nèi)右鍵打開(kāi)Git Bash，輸入命令：
npm install hexo-cli -g
等待安裝完成后，輸入：
hexo init blog
這里的blog是用戶自己取的一個(gè)站點(diǎn)目錄名字。
初始化完成后進(jìn)入站點(diǎn)目錄并安裝依賴(lài)：
cd blognpm install
到這一步，本地博客算是搭建好了，測(cè)試一下：
hexo s
s是server的縮寫(xiě)，表示啟動(dòng)本地服務(wù)器。默認(rèn)情況下，訪問(wèn)網(wǎng)址是：http://localhost:4000/
如果成功的話可以看見(jiàn)官方的默認(rèn)頁(yè)面：
4. 部署網(wǎng)站
在站點(diǎn)目錄下可以看到有如下文件：
其中_config.yml為站點(diǎn)配置文件，用文本編輯器打開(kāi)，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倉(cāng)庫(kù)復(fù)制：
部署之前要先安裝Git部署插件，輸入命令（注意：之后的命令均在站點(diǎn)目錄下執(zhí)行）：
npm install hexo-deployer-git --save
最后，輸入命令：
hexo clean hexo g -d
g是generate的縮寫(xiě)，表示生成靜態(tài)文件；d是deploy的縮寫(xiě)，表示部署到網(wǎng)站上。
打開(kāi)瀏覽器，輸入你的網(wǎng)站地址：https://你的GitHub用戶名.github.io/，就可以看到你的網(wǎng)站已經(jīng)上線了，大功告成！
5. 發(fā)布文章
在命令行中輸入：
hexo n "HelloWorld"
n是new的縮寫(xiě)，表示新建一篇文章。
就可以看到在source/_posts目錄下多了一個(gè)HelloWorld.md文件，這就是一篇文章的源文件了。寫(xiě)完之后生成、部署即可。
文章使用Markdown寫(xiě)成，關(guān)于Markdown可參考：Markdown 教程 | 菜鳥(niǎo)教程
要?jiǎng)h除文章的話，直接把源文件刪除即可（確保至少有一篇文章存在，否則可能出錯(cuò)）。
6. 優(yōu)化網(wǎng)站
1. 更換主題
Hexo有許多好看的主題，這里以我用的NexT主題為例講解怎樣更換主題：
下載主題：Releases · theme-next/hexo-theme-next
解壓所下載的壓縮包至站點(diǎn)的 themes 目錄下，并將解壓后的文件夾名稱(chēng)（hexo-theme-next-x.x.x）更改為
next打開(kāi)站點(diǎn)配置文件_config.yml，找到
theme字段，并將其值更改為next；找到language字段，并將其值更改為zh-CN（在themes/next/languages目錄下可查看主題支持的語(yǔ)言）在切換主題之后， 我們最好使用
hexo clean命令來(lái)清除 Hexo 的緩存
在更換了主題之后界面美觀了許多，終于可以舒舒服服地寫(xiě)文章啦~
但是很不好意思，倘若你的文章里有LaTeX公式或者圖片，你會(huì)發(fā)現(xiàn)顯示不正?！?/p>
作為一名技術(shù)宅，文章里怎么可能不用公式不用圖片嘛，這兩個(gè)坑必須解決了！
2. 插入LaTeX公式
更換支持LaTeX公式的Markdown渲染器：
npm uninstall hexo-renderer-markednpm install hexo-renderer-kramed --save
打開(kāi)主題配置文件（themes/next/_config.yml），找到 math 字段，修改為：
math: enable: true per_page: false
至此，LaTeX公式插入問(wèn)題解決！
3. 插入圖片
首先打開(kāi)站點(diǎn)配置文件_config.yml，找到 post_asset_folder 字段，并將其值更改為 true ，這樣新建文章的同時(shí)Hexo會(huì)自動(dòng)在同目錄下新建一個(gè)以文章名命名的空文件夾以方便存放該文章要用到的資源。
安裝一個(gè)能上傳本地圖片的插件：
npm install https://github.com/CodeFalling/hexo-asset-image --save
假設(shè)在
+---HelloWorld| +-- 1.jpg| +-- 2.jpg| +-- 3.jpg+---HelloWorld.md
這樣的目錄結(jié)構(gòu)（目錄名和文章名一致）中，在文章源代碼里只要使用形如  這樣的語(yǔ)句就可以插入圖片了~
4. 更多
關(guān)于Hexo框架的更多信息請(qǐng)參考：Hexo
關(guān)于NexT主題的更多信息請(qǐng)參考：NexT - Theme for Hexo
標(biāo)題名稱(chēng)：一小時(shí)搭建完自己的個(gè)人網(wǎng)站
網(wǎng)址分享：http://m.rwnh.cn/news34/128584.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、電子商務(wù)、App設(shè)計(jì)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 網(wǎng)站優(yōu)化的知識(shí)可以歸納為以下幾點(diǎn) 2021-09-27
- 網(wǎng)頁(yè)設(shè)計(jì)需要考慮哪些問(wèn)題因素 2021-09-27
- 網(wǎng)頁(yè)風(fēng)格設(shè)計(jì) 2021-09-27
- 著陸頁(yè)優(yōu)化101招-第一部分基本原則 2021-09-27
- 廣州網(wǎng)頁(yè)設(shè)計(jì)：正在流行的16個(gè)網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì) 2021-09-26
- 企業(yè)網(wǎng)站的制作流程有哪些？ 2021-09-26
- 如何打造出完美企業(yè)網(wǎng)站掌握以下幾點(diǎn)方法 2021-09-27
- 南京建網(wǎng)站：建站過(guò)程安全也是值得放在重要位置的問(wèn)題！ 2021-09-27
- 【網(wǎng)絡(luò)推廣】網(wǎng)絡(luò)推廣公司都有哪些網(wǎng)絡(luò)推廣技巧? 2021-09-27
- 關(guān)于網(wǎng)站SEO的這幾個(gè)錯(cuò)誤的認(rèn)識(shí) 2021-09-26
- seo適度優(yōu)化的“度”怎么把握 2021-09-26
- 【SEO優(yōu)化】canonical是什么？canonical標(biāo)簽的使用技巧有哪些？ 2021-09-26
- 提高網(wǎng)站客戶體驗(yàn)的幾種方式你了解嗎 2021-09-26
- 淺談未來(lái)自助建站系統(tǒng)在企業(yè)營(yíng)銷(xiāo)中的應(yīng)用 2021-09-26
- 軟文投稿技巧之注重邏輯性 2021-09-26
- 如何讓自己的品牌網(wǎng)站在行業(yè)中脫穎而出 2021-09-26
- 流量網(wǎng)站在做優(yōu)化中有哪些優(yōu)化技巧 2021-09-26
- 創(chuàng)新互聯(lián)設(shè)計(jì)帶您了解網(wǎng)站備案_企業(yè)網(wǎng)站是否需要備案 2021-09-26
- 漯河網(wǎng)站優(yōu)化中H1標(biāo)簽的重要性 2021-09-26