手把手教你搭建自己的个人博客（图文教程）
「 建立自己的狗窩?」
上篇文章剛寫了一篇平時寫博客的重要性，下面我回復說：【過兩天我在發一篇 如何建立自己的個人博客教程，有興趣的點贊吧】得到了不少贊，看了還是很多小盆友想建立一個屬于自己的博客網站，畢竟金窩銀窩不如自己的狗窩嘛~~emmm
那么今天北媽兌現承諾，就先來一篇 技術程度中等，但面向基礎的，講解超詳細的搭建教程，是基于nodejs前端服務 +git管理的方式，超流行超好玩的嗯。跟著教程做，和你平時開發自己公司程序一樣簡單，一會就搭建完了，下面來吧，別皮了！
「 個人博客的重要性?」
首先我們談一談搭建個人博客必要性，個人認為在學習過程中，被動接受知識對你的提高是輕微的。比如你看網課學習，在聽老師講解的時候感覺簡單易懂，代碼邏輯明了清晰，當自己敲代碼的時候，卻無從下手，這也屬于眼高手低的范疇。
當自己主動學習，主動思考其效率和對個人的提升無疑是高于被動接受的。然而使你提高最大的是主動說出自己認知，把自己的知識和理解傳達給他人，這種方式是對你提升無疑是最顯著的。
可見搭建個人博客是非常有必要的，很多讀者很早就要求我發一篇搭建個人博客的文章，由于個人時間愿意本來想直接轉載，但是在自己實際操作中遇到很多坑，浪費不少時間，都是把主要步驟給出且時間久遠，沒有詳細的圖文配合。
應讀者的要求，小編邀請了自己的朋友完成了這一篇教程，本教程作者為「illgo」,可以點擊閱讀原文關注他的博客，中間遇到很多坑，如果您搭建成功別忘了回來打賞原作者，如果步驟有不明白的可以在文末向教程作者提問。
最終成果：
PC端：
移動端：
一. 前言
本篇文章將會使用最初始的虛擬機安裝嶄新的系統(Windows 7)和DigitalOcean購買的服務器(CentOS7.5)作為示例，注意并不是讓大家在虛擬機上搭建，為了模擬嶄新的環境，作者采取虛擬機的方式，你們直接在個人電腦操作即可。
當然可以選擇阿里云或者騰訊云，而我為什么選擇DigitalOcean購買服務器？主要原因是便宜，只需要5美元就能購買一年期限的美國服務器，需要學生GitHub認證后會贈送代金券，不過購買服務器需要Paypal，購買地址為：https://m.do.co/c/1d4464e8355e
本文的特點是細節多,想到什么補充什么,因此,大家碰到問題時,可以通過細節上的不同找到問題所在.
本篇文章的受眾:
極客,想擁有一個漂亮的博客,想快速了解,但不想把時間花在由于細節導致的各種問題上.
只是想快速擁有一個在自己服務器上的博客的朋友.
二. 博客框架的選擇
如果你是我所說的本篇文章的受眾,當你要搭建一個博客時,你絕不會想自己從頭到腳寫一個框架出來.我在這里向大家介紹幾款流行的Blog框架:
Jekyll?(https://jekyllrb.com/)
hugo?(http://www.gohugo.org/)
django?(https://www.djangoproject.com/)
hexo?(https://hexo.io/)
這里我考慮了一下,并沒有將需要我們自己管理數據庫的重型CMS(如:WordPress等)納入.
選擇的標準有什么呢?
美觀程度
系統需求
搭建難度
可擴展性
插件提供
文檔是否全面
假如你是python學習者,請選擇django,這幾乎是每個學習python的小伙伴的必經之路.本篇文章我選擇的是Hexo,主要是它擁有我最喜歡的主題NeXT,滿足了我最大的需求:美觀.
如果你也和我一樣美觀是第一位,請點開每個框架的官網,找到他們的Theme下的示例,找出你最喜歡的即可.那么,我們將會從Hexo開始,其他框架的請參照具體官網文檔,和他們的GitHub issues.
注: 和Hexo官網的Getting Started并不沖突,本文從零開始,全程截圖,與官方文檔互為補充.
三. Hexo介紹
Hexo 特點
支持Markdown: 支持Markdown意味著你可以把經歷從排版中解放出來.
輕量: 無需擁有后臺及數據庫,專心寫好你的文章
一鍵部署: 可以通過Git或者ftp來將生成的靜態頁面部署到服務器或者主機空間中
插件豐富: 豐富的插件可以滿足你的各種需求.
Hexo的工作機制
Hexo基于Node.js,將/source文件夾下的資源(文章,圖片,模板),按照預定的配置文件,轉換成靜態頁面放置到/public目錄下.如果需要預覽或者部署,hexo會把public作為web目錄處理.具體的細節可以通過實踐接下來的步驟,來逐漸明曉.
Node.js和npm
如果您之前接觸過Node.js,可以略過此部分.
Node.js是一個基于Chrome V8引擎的JavaScript運行環境,為我們的Hexo提供js腳本的運行環境.而npm則是一個JavaScript的包管理工具.主流的很多語言都會有自己的包管理器(們):
PHP
Composer
Ruby
gem
Python
pip
easy_install
Javascript
bower
npm
yarn
包管理器可以幫助你管理依賴,比如我們要裝的Hexo以及Hexo插件,Hexo和Hexo插件是其他開發者開發的代碼(Package),包管理器可以幫你下載并管理這些代碼.
Hexo官網教程中使用的是npm,但是由于網絡問題以及便捷性,我選擇用yarn來代替,當然,輕度使用的話只是在操作上大同小異.
四. 安裝所需環境
注: 以下安裝為本機客戶端環境安裝
安裝Node.js
Node.js官網下載最新LTS版本(截至發稿v8.11.1)的Node.js并安裝(如果你想同時管理多版本的Node.js請使用nvm)
Yarn官網下載最新版(截至發稿v1.5.1)并安裝.
安裝過程根據平臺不同因人而異,在此略去不表.
在命令行中通過查看版本,確保我們的環境安裝成功,并且可執行文件路徑添加到了環境變量之中.
安裝git
Git - Downloads(https://git-scm.com/downloads)下載 64-bit Git for Windows Portable ,雙擊選擇依照你個人喜好指定的目錄(注意介于權限問題,避免在c:/program files下),我安裝在c:/some/git下
右鍵開始(windows 10)-搜索,輸入環境變量,編輯系統環境變量.
3. 選擇環境變量
4. 在系統變量中選擇Path點擊編輯
5. 在末尾加上分號,然后將你安裝目錄下,git.exe所在路徑填入(Windows 10更加簡便,不再贅述)
6.? 新開一個終端,然后查看git命令是否生效
7.? 設置git
設置本地用戶的信息,引號內隨意填
git config --global user.name "illgo"
git config --global user.email "i@illgo.cn"
安裝Hexo
在這一步,我們通過Yarn來全局安裝Hexo.
在這里解釋Yarn(npm相同)全局安裝和本地安裝的區別:
全局安裝會把package存放在用戶目錄指定的目錄下,本地安裝則是存放在當前項目的node_module目錄中.
全局安裝使我們的二進制執行文件在操作系統內全局可用,比方說,命令行下輸入命令即可運行.本地安裝則是作為依賴供項目調用.
我們安裝hexo需要作為一個工具在命令行下可以直接運行,所以采用全局安裝;而像hexo依賴的插件則可以在hexo項目目錄下本地安裝：
yarn global add hexo
如圖即為安裝成功!
五. 使用Hexo
你需要熟悉并修改兩個配置文件
Hexo配置文件:myblog/_config.yml
主題配置文件:myblog/themes/next/_config.yml
創建站點目錄
選擇一個目錄作為hexo站點目錄,我選擇在桌面新建一個myblog目錄,作為hexo目錄.
hexo init
安裝主題NexT
在你的hexo站點目錄下
git clone https://github.com/iissnan/hexo-theme-next themes/next
啟用主題
用任意編輯器打開Hexo配置文件
長成這樣:
Ctrl + F 搜索 theme
theme: next
測試
hexo s --debug
按照提示,在瀏覽器中輸入url,即可查看效果.
Hexo基本配置
我們可以通過Configuration | Hexo來了解_config.yml的基本配置方法.后面我們將會對其進行部分補充.
NexT主題配置
NexT主題的配置可以直接查看其配置文件中的注釋,已經很詳細了.
六.部署
部署是本文的重點,git部署有兩種方式:
部署到自己的服務器上
網上流行的GitHub Pages
本文講的是前者,服務器部署.
部署到服務器
我們的大體思路就是:
hexo生成靜態頁面->git提交到git服務器->git服務器通過Hook運行腳本,在www目錄下clone Git倉庫->呈現頁面
以臨時創建的Centos 7.5服務器為示例
為SSH連接創建密鑰對
由于使用git作為部署,所以無法避免的我們要使用密鑰對的方式來連接,而不是口令.
1.?創建SSH密鑰對:
打開剛才安裝git目錄下的git-bash.exe.git-bash已經提供了BASH環境,為了簡單和快捷,我們使用這個git-bash作為ssh工具
ssh-keygen -t rsa -C "i@illgo.cn"
按照提示他會在當前用戶目錄下的.ssh目錄下生成兩個文件:
id_rsa 私鑰
id_rsa.pub 公鑰
2. 在服務器中添加公鑰
后將公鑰添加到你在Centos的要登錄的用戶名下的,我們部署采用git用戶,按道理應添加到服務器的/home/git/.ssh/authorized_keys文件中.但是本次采用DigitalOcean提供的添加公鑰功能,在Web中操作,他會將公鑰直接添加到/root/.ssh/authorized_keys中.如果你用其他的云服務器提供商,也會有類似的功能.此過程略去.
以下操作使用ssh連接服務器來操作.
在服務器上安裝Web服務器
Hexo會根據你的_config.yml配置的source_dir下的資源文件,在public_dir下生成靜態網頁,部署這些靜態文件.本次在服務器上安裝Apache作為web服務器,通過Git和Git hook來部署.
安裝Apache
yum -y install httpd
systemctl start httpd
然后訪問該服務器的80端口即可看到Apache的測試頁面:
在服務器上創建Git服務器
1. 服務器端安裝Git
使用root賬戶
yum install -y git
2. 創建Git用戶
useradd git
passwd git
3. 創建空倉庫
創建一個空倉庫并把所有權給git用戶
mkdir -p /home/git/repos/myblog.git
git init --bare /home/git/repos/myblog.git
chown -R git:git /home/git/repos/myblog.git/
5. 在web目錄下Clone
注意: 提交的用戶要對/var/www/html有寫權限
git clone /home/git/repos/myblog.git /var/www/html
chown -R ?git:git /var/www/html/
4. 設置Git Hook
我們使用Git Hook的目的就是,在Hexo部署時,會把Hexo生成的靜態web資源,自動部署到web目錄下.
我們需要一個post-receivew如下：
#判斷是不是遠端倉庫
IS_BARE=$(git rev-parse --is-bare-repository)
if [ -z "$IS_BARE" ]; then
echo >&2 "fatal: post-receive: IS_NOT_BARE"
exit 1
fi
unset GIT_DIR
DeployPath="/var/www/html/"
echo "==============================================="
cd $DeployPath
echo "deploying the myblog web"
#git stash
#git pull origin master
git fetch --all
git reset --hard origin/master
time=`date`
echo "web server pull at webserver at time: $time."
echo "================================================"
在DeployPath中填入你的www目錄,這里我采用Apache Web服務器默認的位置.
在本地計算機中,我們可以利用剛git-bash.exe使用scp工具將這個文件上傳到git服務器的hook目錄下
配置git部署
添加 hexo-deployer-git 包依賴
yarn add ?hexo-deployer-git
設置_config.yml中的deploy:
- type: git
? ?repo: git@159.89.144.28:/home/repo/blog.git
測試
在Hexo站點目錄下
hexo g --deploy
訪問之前的url就會看到效果了!
七. SEO
關于SEO優化和其它內容我們單獨一篇文章講解，為了方便搜索引擎的檢索,我們要盡量使自己文章的路徑深度小，Google會收錄你的網站，但是百度需要一定的瀏覽訪問。你可以投稿原創文章到此平臺，我們會注明你的博客鏈接，久而久之自己的博客會被收錄。
問題記錄
?deploy的時候出現
mote: error: cannot run hooks/post-receive: No such file or directory
然而我的post-receive是存在且正確的,而且有執行權限.
當直接運行post-receive的時候發現錯誤是這樣的:
-bash: /home/git/repos/myblog.git/hooks/post-receive: /bin/bash^M: bad interpreter: No such file or directory
這是因為換行字符的原因,Unix下應該是LF,所以提示的”未找到文件”指的是/bin/bash末尾多了個字符未找到.使用編輯器切換一下換行方式并保存.
Git - remote: error: cannot run hooks/post-receive: No such file or directory 報錯查看下方鏈接：
https://stackoverflow.com/questions/11630433/git-remote-error-cannot-run-hooks-post-receive-no-such-file-or-directory/40355988
八、設置域名
首先去阿里云或者騰訊云購買域名，然后實名認證就可以了。
1. 打開域名管理，點擊解析
2. 添加記錄，選擇 www
3. 記錄值為自己服務器的ip地址
4. 輸入 www.wang91.cn?
總 結
以上便是完成個人博客搭建的教程了，本文來自我的粉絲兼好友的技術公眾號：【Web項目聚集地】，id：web_resource
原創不易，如果覺得好請搜索關注他
如果你在操作過程中遇到了不懂的問題或者困難，請留言或入群詢問，盡量問題描述清楚。本來想從網上轉載一篇，發現教程都不是面向基礎的同學，如果搭建成功，請感謝原作者，原創不易，多多支持。請積極留言，并行動起來快速搭建吧，只有好處、沒有壞處！
熱門閱讀：
1.?各個階級的前端?必須掌握的基本技能匯總
2.?找工作如何避免培訓機構騙局
3.?我為何一直強調外包公司別去
每天只想聽你們說：小北最帥！
長按掃碼關注我
前端你別鬧
總結
以上是生活随笔為你收集整理的手把手教你搭建自己的个人博客（图文教程）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 科大星云诗社动态20210518
- 下一篇： 科大星云诗社动态20210517