如何自己搭建一個(gè)個(gè)人網(wǎng)站?
時(shí)間:2022-07-30 21:30:01 | 來(lái)源:網(wǎng)站運(yùn)營(yíng)
時(shí)間:2022-07-30 21:30:01 來(lái)源:網(wǎng)站運(yùn)營(yíng)
好家伙,我回顧這些年的程序員生涯,發(fā)現(xiàn)折騰最多的是搭建網(wǎng)站。。。
先來(lái)秀一下我現(xiàn)在的網(wǎng)站:
https://www.cxyxiaowu.com然后告訴告訴你如何從零開(kāi)始搭建一個(gè)酷炫免費(fèi)的個(gè)人博客。GitHub創(chuàng)建個(gè)人倉(cāng)庫(kù)
登錄到 GitHub ,如果沒(méi)有 GitHub 帳號(hào),請(qǐng)使用你的郵箱注冊(cè) GitHub 帳號(hào):
https://github.com/join?source=header-home登錄成功之后,點(diǎn)擊 GitHub 中的 New repository 創(chuàng)建新倉(cāng)庫(kù),倉(cāng)庫(kù)名應(yīng)該為:
用戶(hù)名 .
http://github.io 。這里
用戶(hù)名使用你的 GitHub 帳號(hào)名稱(chēng)代替,這是固定寫(xiě)法。
ps: 因?yàn)槲乙呀?jīng)注冊(cè)了同名倉(cāng)庫(kù),因此第二次創(chuàng)建時(shí)會(huì)報(bào)錯(cuò)。
我的倉(cāng)庫(kù)名為 :
Git管理
Git 是目前世界上最先進(jìn)的分布式版本控制系統(tǒng)(沒(méi)有之一)。這是使用 Git 的目的是為了將我們的網(wǎng)站從本地提交上服務(wù)器(GitHub)上面去。我認(rèn)為 Git 操作是程序員應(yīng)該具備的一個(gè)基本操作,具體的 Git 操作細(xì)節(jié)可以查看廖雪峰的教程,講的十分詳細(xì)
https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000安裝好 Git 后,只需要進(jìn)行下面的配置即可。
配置信息
在終端進(jìn)行操作,設(shè)置 user.name 和 user.email 配置信息,我這里設(shè)置為全局。
1git config --global user.name "你的GitHub用戶(hù)名"2git config --global user.email "你的GitHub注冊(cè)郵箱"
生成密鑰
通過(guò)注冊(cè)的郵箱生成 ssh 密鑰文件:
1ssh-keygen -t rsa -C "你的GitHub注冊(cè)郵箱"
然后直接三個(gè)回車(chē)即可,默認(rèn)不需要設(shè)置密碼。最后得到了兩個(gè)文件:
id_rsa
和
id_rsa.pub
。
拷貝密鑰
打開(kāi)
id_rsa.pub 文件
,將里面的內(nèi)容全部復(fù)制。
粘貼到GitHub
測(cè)試GitHub SSH
添加好
SSH Key
后,進(jìn)行測(cè)試。
1ssh -T git@github.com
你將會(huì)看到:
1The authenticity of host 'github.com (207.97.227.239)' can't be established.2RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.3Are you sure you want to continue connecting (yes/no)?
選擇
yes
1Hi MisterBooo! You've successfully authenticated, but GitHub does not provide shell access.
如果看到
Hi
后面是你的用戶(hù)名,就說(shuō)明成功了。
安裝Node.js
Hexo 基于 Node.js,因此需要先安裝 Node.js,你可以在這里進(jìn)行對(duì)應(yīng)電腦版本的下載:
https://nodejs.org/en/download/你也可以通過(guò)命令行進(jìn)行安裝:
cURL:
1$ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh2
Wget:
1$ wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh2
安裝完成后,重啟終端并執(zhí)行下列命令即可安裝 Node.js。
1$ nvm install stable
Hexo安裝
Hexo 是一個(gè)快速、簡(jiǎn)潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內(nèi),即可利用靚麗的主題生成靜態(tài)網(wǎng)頁(yè)。
所有必備的應(yīng)用程序安裝完成后,即可使用 npm 安裝 Hexo。
1$ npm install -g hexo-cli
Hexo使用
安裝好 Hexo 后,馬上就能使用了。首先初始化博客,輸入:
1$ hexo init myBlog
接下來(lái),進(jìn)入文件夾
myBlog
,輸入
1$ hexo s
然后,打開(kāi)瀏覽器輸入地址:
1localhost:4000
執(zhí)行到這里事實(shí)上博客就已經(jīng)搭建好了,接下來(lái)就是去完善它。
注意:下面的命令都是在
myBlog
文件里進(jìn)行操作的。
添加文章
1.直接導(dǎo)入文章
你可以將你平時(shí)寫(xiě)的文章直接導(dǎo)入到
_posts
文件夾里,注意文章類(lèi)型得是
md
格式。
2.寫(xiě)新文章
你可以執(zhí)行下列命令來(lái)創(chuàng)建一篇新文章。
1$ hexo new [layout] <title>
你可以在命令中指定文章的布局(layout),默認(rèn)為
post
,可以通過(guò)修改
_config.yml
中的
default_layout
參數(shù)來(lái)指定默認(rèn)布局。
這樣在
_posts
文件夾里也生成了一篇新的文章。
生成網(wǎng)頁(yè)
使用 Hexo 生成靜態(tài)文件快速而且簡(jiǎn)單。
1$ hexo generate
你也可以簡(jiǎn)寫(xiě)成
1$ hexo g
啟動(dòng)服務(wù)預(yù)覽文章
輸入以下命令以啟動(dòng)服務(wù)器,你的網(wǎng)站會(huì)在
http://localhost:4000
下啟動(dòng)。在服務(wù)器啟動(dòng)期間,Hexo 會(huì)監(jiān)視文件變動(dòng)并自動(dòng)更新,無(wú)須重啟服務(wù)器。
1$ hexo server
你也可以簡(jiǎn)寫(xiě)成
1$ hexo s
如果你想要更改端口,或是在執(zhí)行時(shí)遇到了
EADDRINUSE
錯(cuò)誤,可以在執(zhí)行時(shí)使用
-p
選項(xiàng)指定其他端口,如下:
1$ hexo server -p 5000
小總結(jié)
1hexo new "我的博客文章" #新建文章1hexo generate #生成網(wǎng)頁(yè)1hexo server #啟動(dòng)服務(wù)預(yù)覽
這三個(gè)命令依次就是新建一篇博客文章、生成網(wǎng)頁(yè)、在本地預(yù)覽的操作。
部署
Hexo 提供了快速方便的一鍵部署功能,只需一條命令就能將網(wǎng)站部署到服務(wù)器上。
1$ hexo deploy
你也可以簡(jiǎn)寫(xiě)成
1$ hexo d
在開(kāi)始之前,必須先在
_config.yml
中修改參數(shù),一個(gè)正確的部署配置中至少要有
type
參數(shù),例如:
1deploy:2 type: git
在
_config.yml
中進(jìn)行修改。
這一步的目的是將 Hexo 與 GitHub 進(jìn)行關(guān)聯(lián)。
配置好后通過(guò)
1$ hexo d
命令,稍等片刻,網(wǎng)站就已經(jīng)部署好了,可以在瀏覽器輸入
你的GitHub名稱(chēng).github.io
,這樣一個(gè)免費(fèi)的博客就已經(jīng)搭建好了。
Hexo 主題
hexo 默認(rèn)的主題可能顯得有點(diǎn)呆板,你可以在
https://hexo.io/themes/index.html進(jìn)行主題的挑選更換。將下好的主題安放在
themes
文件夾內(nèi),同時(shí)在
_config.yml
中進(jìn)行主題修改就好了。
經(jīng)過(guò)一個(gè)小時(shí)的主題篩選,我選擇了
hexo-theme-matery
這款主題。通過(guò)
https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/文檔說(shuō)明,經(jīng)過(guò)簡(jiǎn)單的配置,效果就出來(lái)了!
一般大佬們提供的主題都會(huì)提供文檔說(shuō)明,按照說(shuō)明進(jìn)行簡(jiǎn)單的設(shè)置就能擁有一個(gè)酷炫的頁(yè)面了。
Markdown 寫(xiě)作Markdown是一種可以使用普通文本編輯器編寫(xiě)的標(biāo)記語(yǔ)言,通過(guò)簡(jiǎn)單的標(biāo)記語(yǔ)法,它可以使普通文本內(nèi)容具有一定的格式。
世面上支持 Markdown 語(yǔ)法的編輯器不勝枚舉,選擇起來(lái)十分困難,小吳在這里推薦 Typora 這款 Markdown 寫(xiě)作軟件。
Typora 是一款免費(fèi)的 MD 編輯器,它是優(yōu)雅簡(jiǎn)潔與強(qiáng)大開(kāi)放的完美結(jié)合體。
官網(wǎng)直達(dá)
https://typora.ioImage
選擇 Typora 一個(gè)最主要的原因是它對(duì)圖片的良好支持。
在 Mac 上安裝好 iPic 后 ,并在設(shè)置中將圖片插入修改為 通過(guò) iPic 上傳 ,快捷鍵是 control + command + i ,就可以十分快捷優(yōu)雅地完成圖片插入。強(qiáng)調(diào)一點(diǎn):圖床使用默認(rèn)的微博圖床即可,建議不要折騰。
這樣,每次寫(xiě)作時(shí),將圖片拖入到 Typora 里,圖片就能自動(dòng)上傳到圖床上。
總結(jié)
- 申請(qǐng) GitHub 賬號(hào)
- 在 GitHub 上創(chuàng)建倉(cāng)庫(kù)
- 配備 Git ,同時(shí)將 SSH Key 提交到 GitHub 上
- 安裝 Node.js
- 安裝 Hexo
- 安裝 Hexo 主題
- 使用 Markdown 軟件寫(xiě)文章
希望這篇文章能幫到想寫(xiě)博客卻還沒(méi)付諸行動(dòng)的人,畢竟擁有一個(gè)免費(fèi)且酷炫的博客還是挺簡(jiǎn)單還挺好玩的:)
歡迎在評(píng)論區(qū)秀出你的網(wǎng)站。