閱讀文本大概需要 10 分鐘。
一、爲什麼要搭建個人博客?
1、如果我們熱衷於技術,第一個可能想到的就是 Github ,Github 上各種開源的項目在我們小白初級階段完全看不懂,但是我們既要融入這個全球最大的交友網站 Github上來,又要在 Github 上展現出我們對技術的熱情,那麼今天這篇文章就是你最好的一個選擇,搭建一個個人博客,你可以不會html/css網頁設計,可以不會軟件開發,只要你按照這個流程走,就可以搭建起一個屬於自己的個人博客,你寫的文章可以傳到個人博客,寫的筆記也可以傳到個人博客,你的開源項目也可以在個人博客做介紹。如果別人看到了你的文章並收穫了很多知識,就會給你點亮一顆星,這顆星與QQ空間的點贊可不一樣,如果你有一個文章或者一個開源項目點星到了100,那就說明你已經在裏邊很牛了,但是想得到這100個星也是很難的。
2、只有一個鐘情技術的人,纔會想像朋友圈一樣每天關注 GitHub,維護 GitHub。所以你“綠油油”的 GitHub 是你的技術熱情的最好體現。 那麼,我們就從個人博客開始維護,面試的時候面試官看了你這 Github 上“綠油油的”一片,就知道了你對技術有多麼熱情,下圖你會心動嗎?
PS: 曾經一個技術很不錯的小夥伴終面的時候掛了,面試系統中的備註是:“看不到他對技術的熱情”。所以這也會作爲面試的一個考量。
如果有兩個人去面試,別人 Github 上“綠油油”一片,你的確是撒哈拉大沙漠,一點都體現不出你對技術的熱情。
二、建站前的準備
建站之前我們先要做好準備工作,將相關的工具準備好。
1、安裝 Node.js
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型,使其輕量又高效。
安裝網址:https://nodejs.org/zh-cn/
驗證是否安裝成功:打開cmd命令行(win+r 輸入cmd回車)執行 :
1node -v 2npm -v
安裝成功之後顯示版本號:
2、安裝 Git
通常使用 github 的對 git 並不陌生,Git(讀音爲/gɪt/。)是一個開源的分佈式版本控制系統,可以有效、高速的處理從很小到非常大的項目版本管理。 [1] Git 是 Linus Torvalds 爲了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟件。
安裝網址:https://www.git-scm.com/download/win
驗證是否安裝成功:打開cmd命令行(win+r 輸入cmd回車)執行 :
1git --version
安裝成功之後顯示版本號:
3、安裝 Hexo
Hexo 是一個快速、簡潔且高效的博客框架。
瞭解更多關於 Hexo 請查看官方網站:https://hexo.io/zh-cn/
① 安裝 hexo 框架
下面一起來看看怎麼安裝 Hexo 框架?
首先選擇一個文件夾,這個文件夾主要存放關於你博客的配置文件以及以後要寫的的文章,在該文件夾的根目錄運行之前下好的 git-bash.exe 。
輸入命令開始安裝:
1$ npm install -g hexo-cli
這裏安裝的是hexo最新版本,如果想安裝以前的的版本請運行命令$ npm install -g hexo
以上步驟不出問題的話就已經在本地機器上搭建起了 Hexo 環境。
下面介紹 Hexo 的具體使用方法。
② 初始化Hexo
A、創建hexo工程
1$ hexo init blog
創建一個文件夾blog(blog 爲文件夾的名字,可改成自己想要的名字),使用 Hexo 命令初始化 blog 爲 hexo 工程目錄。
B、新建POST
1$ cd blog 2$ hexo new “HelloWorld”
進入初始化後的 blog 文件夾,創建名爲HelloWorld的文件,此時會在 /blog/sources/_post/ 目錄下生成 HelloWorld.md 文件。
進入初始化後的blog文件夾,創建名爲HelloWorld的文件,此時會在/blog/sources/_post/目錄下生成HelloWorld.md文件。
C、生成靜態文件
1$ hexo generate
使用 Hexo 引擎將 Markdown 格式的文件解析成可以使用瀏覽器查看的 HTML 文件,HTML 文件存儲在blog/public 目錄下。
D、運行hexo服務器
1$ hexo server
打開命令行提示的地址,一般是 :
http://localhost:4000/,既可以看到我們的 Hexo 網站。
此時 Helloworld 文章中沒有任何內容。打開 /blog/sources/_post/ 目錄,使用編輯器打開其中的 HelloWorld.md 並在其中添加 markdown 格式的內容保存,然後重新運行以下命令:
1$ hexo generate 2$ hexo server
命令的含義:hexo generate 生成靜態文件, hexo server 啓動服務器。默認情況下,訪問網址爲: http://localhost:4000/。 如果重新改變端口號請詳細查看官網文檔,這裏不多介紹。
注意:如果在 HelloWorld.md 文件中有中文,在網頁進行瀏覽可能出現亂碼,解決方式通過編輯器打開HelloWorld.md 文件把編碼方式改成 utf-8 就可以了。
③ 安裝主題
Hexo 提供了默認主題 landscape,主題的位置在 blog ->themes 文件夾下。主題根據自己喜好可以在網上找到,通過 Git 進行相應的下載。下面貼出幾個主題可以進行相應的下載,喜歡哪一個可以進行配置到自己的個人博客了。
主題一:hexo-theme-next(我用的主題是這一個,後期是自己改進美化的)
主題二:Casper
主題三:daleanthony
主題四:hexo-theme-yilia
主題五:jacman
主題六:hexo-theme-apollo
我給大家找了一個主題鏈接可以選擇自己喜歡的主題:更多主題
A、配置主題
1$ cd /blog/themes
打開 git-bash 切換到 blog -> themes 目錄下,如果在目錄 blog ->themes 右鍵選擇啓動 git-bash 就不用切換了。如果在桌面直接啓動 git-bash ,可通過下邊命令切換到 blog ->themes目錄下。
1$ cd /blog/themes
選好一個主題,複製主題的 github 地址,通過 git 命令進行下載。(例:https://github.com/iissnan/hexo-theme-next 爲一個主題的 github 地址)
1git clone https://github.com/iissnan/hexo-theme-next
下載完之後我將文件夾改成 next 了(也可以不改,我爲了名字簡潔點)。
然後在修改 /blog/config.yml 文件,將其中的 theme 改成 next。(這個是改變主題的地方,如果你用的是其他的主題,將這個 next 改成你下載下來的主題的文件夾的名稱)
重新運行以下命令,查看更換主題後的效果 :
1$ hexo generate 2$ hexo server
三、申請 Github 免費靜態內容空間
1、註冊 Github 賬號
我們去 Github 的官網進行賬號註冊 ,註冊完成之後我們根據官方文檔進行配置 ,然後我們使用自己的賬戶創建一個 Repository (倉庫)。
點擊網站右上角的 + 號,選擇 New Repository( 注意:創建倉庫的名字要你的註冊的用戶名一致。其他默認,確定創建)。
之後你的靜態內容空間就已經創建好了,在瀏覽器輸入你的 your username(用戶名).github.io 就可以訪問了。
四、將 Hexo 上傳 Github 上
1、步驟一:安裝 deployer-git (安裝部署工具,方便以後更新)
1$ npm install hexo-deployer-git --save
2、步驟二:在 /blog/_config.yml 中修改 deploy 屬性(注意“:”之後有空格 ) 否則配置失敗。
1deploy: 2 type: git 3 repository: https://github.com/你的地址 4 branch: master
將上方的 Repository 換成你申請的 Git 倉庫地址
使用 https 的方式部署每次提交到 Github 都要輸入用戶名和密碼,如果嫌麻煩請使用 SSH 的方式,百度/谷歌自行搜索。
3、步驟三:初始化本地倉庫。
1git init
4、步驟四:連接遠程倉庫 ( 如果是第一次使用 git,在使用 git 的時候會提示輸入用戶名和密碼,用戶名是自己的註冊郵箱。 )
1git remote add origin 你的倉庫地址
點擊原文可以查看小鹿的博客,預覽一下博客效果哦。