一文教會你如何搭建個人博客

閱讀文本大概需要 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 你的倉庫地址

點擊原文可以查看小鹿的博客,預覽一下博客效果哦。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章