2021-09-27 分類: 網站建設
擁有自己的個人網站一直是我的一個目標。
在網上看了很多方法之后我最終選擇了GitHub Pages + Hexo這條技術路線,原因有兩點:
完全免費,學生黨沒有多少錢。
比較方便,有現成的框架可用。
整個搭建過程快的話半小時就可以搞定。
搭建完成后大概是這樣子的:青羽的博客
準備一個GitHub賬號:GitHub
新建一個Repositories,Repository name填 你的GitHub用戶名.github.io
你的GitHub用戶名.github.io
下載并安裝NodeJS:Node.js
下載并安裝Git for Windows:Git for Windows
鼠標右鍵打開Git Bash:
輸入命令配置用戶名和郵箱信息:
git config --global user.name "你的GitHub用戶名"git config --global user.email "你的GitHub注冊郵箱"
生成ssh密鑰文件:
ssh-keygen -t rsa -C "你的GitHub注冊郵箱"
默認不設置密碼,直接回車就行。
用文本編輯器打開生成的id_rsa.pub文件,Crtl+a,Ctrl+C復制全部內容。
打開GitHub的SSH設置頁面:SSH and GPG keys
New SSH key,Title任取,Key粘貼剛剛復制的字符串,add SSH key
Hexo是一個博客框架。接下來,開始安裝Hexo。
選定一個文件夾作為存放博客文件的目錄,在選定的文件夾內右鍵打開Git Bash,輸入命令:
npm install hexo-cli -g
等待安裝完成后,輸入:
hexo init blog
這里的blog是用戶自己取的一個站點目錄名字。
blog
初始化完成后進入站點目錄并安裝依賴:
cd blognpm install
到這一步,本地博客算是搭建好了,測試一下:
hexo s
s是server的縮寫,表示啟動本地服務器。默認情況下,訪問網址是:http://localhost:4000/
如果成功的話可以看見官方的默認頁面:
在站點目錄下可以看到有如下文件:
其中_config.yml為站點配置文件,用文本編輯器打開,Crtl+F查找 url 字段,修改為:
url
url: https://你的GitHub用戶名.github.io/
再翻到最后找到 deploy 字段,修改為:
deploy
deploy: type: git repo: https://github.com/你的GitHub用戶名/你的GitHub用戶名.github.io.git branch: master
上面的 repo 字段的值可以直接從GitHub倉庫復制:
repo
部署之前要先安裝Git部署插件,輸入命令(注意:之后的命令均在站點目錄下執行):
npm install hexo-deployer-git --save
最后,輸入命令:
hexo clean hexo g -d
g是generate的縮寫,表示生成靜態文件;d是deploy的縮寫,表示部署到網站上。
打開瀏覽器,輸入你的網站地址:https://你的GitHub用戶名.github.io/,就可以看到你的網站已經上線了,大功告成!
https://你的GitHub用戶名.github.io/
在命令行中輸入:
hexo n "HelloWorld"
n是new的縮寫,表示新建一篇文章。
就可以看到在source/_posts目錄下多了一個HelloWorld.md文件,這就是一篇文章的源文件了。寫完之后生成、部署即可。
文章使用Markdown寫成,關于Markdown可參考:Markdown 教程 | 菜鳥教程
要刪除文章的話,直接把源文件刪除即可(確保至少有一篇文章存在,否則可能出錯)。
Hexo有許多好看的主題,這里以我用的NexT主題為例講解怎樣更換主題:
下載主題:Releases · theme-next/hexo-theme-next
解壓所下載的壓縮包至站點的 themes 目錄下,并將解壓后的文件夾名稱(hexo-theme-next-x.x.x)更改為 next
next
打開站點配置文件_config.yml,找到 theme 字段,并將其值更改為 next ;找到 language 字段,并將其值更改為 zh-CN(在themes/next/languages目錄下可查看主題支持的語言)
theme
language
zh-CN
在切換主題之后, 我們最好使用 hexo clean 命令來清除 Hexo 的緩存
hexo clean
在更換了主題之后界面美觀了許多,終于可以舒舒服服地寫文章啦~
但是很不好意思,倘若你的文章里有LaTeX公式或者圖片,你會發現顯示不正?!?/p>
作為一名技術宅,文章里怎么可能不用公式不用圖片嘛,這兩個坑必須解決了!
更換支持LaTeX公式的Markdown渲染器:
npm uninstall hexo-renderer-markednpm install hexo-renderer-kramed --save
打開主題配置文件(themes/next/_config.yml),找到 math 字段,修改為:
math
math: enable: true per_page: false
至此,LaTeX公式插入問題解決!
首先打開站點配置文件_config.yml,找到 post_asset_folder 字段,并將其值更改為 true ,這樣新建文章的同時Hexo會自動在同目錄下新建一個以文章名命名的空文件夾以方便存放該文章要用到的資源。
post_asset_folder
true
安裝一個能上傳本地圖片的插件:
npm install https://github.com/CodeFalling/hexo-asset-image --save
假設在
+---HelloWorld| +-- 1.jpg| +-- 2.jpg| +-- 3.jpg+---HelloWorld.md
這樣的目錄結構(目錄名和文章名一致)中,在文章源代碼里只要使用形如 ![](HelloWorld/1.jpg) 這樣的語句就可以插入圖片了~
![](HelloWorld/1.jpg)
關于Hexo框架的更多信息請參考:Hexo
關于NexT主題的更多信息請參考:NexT - Theme for Hexo
標題名稱:一小時搭建完自己的個人網站 網址分享:http://vcdvsql.cn/news34/128584.html
成都網站建設公司_創新互聯,為您提供網站排名、關鍵詞優化、品牌網站建設、網站設計、電子商務、App設計
廣告
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容
網站建設知識
分類信息網站