現(xiàn)在是互聯(lián)網(wǎng)逐漸發(fā)展,已經(jīng)出現(xiàn)了很多可以供自己寫博客的網(wǎng)站,大家可以在上面 發(fā)表自己的文章,供自己記錄或者是供他人閱讀。但是,可不可以自己搭建一個(gè)只屬于自己的個(gè)人博客網(wǎng)站呢?這篇文章就帶你從0開始搭建一個(gè)自己的個(gè)人博客網(wǎng)站,并部署到屬于自己服務(wù)器。這里有一點(diǎn)要說的是,沒有服務(wù)器的同學(xué)使用自己機(jī)器的linux系統(tǒng)也是一樣的操作。我們選用一個(gè)很好用的博客框架Hexo進(jìn)行搭建我們的個(gè)人博客。
博客框架Hexo介紹:
Hexo是一個(gè)快速,簡介而且高效的博客框架,Hexo 使用Markdown(或其他渲染引擎)解析文章,在幾秒內(nèi),即可生成一個(gè)靜態(tài)網(wǎng)頁展示我們發(fā)布的文章,同時(shí)也提供了大量精美的博客主題供我們使用。
Hexo博客框架的優(yōu)點(diǎn)
-
速度極快:Node.js 所帶來的超快生成速度,讓上百個(gè)頁面在幾秒內(nèi)瞬間完成渲染。
-
支持MarkDown:Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多數(shù)插件。
-
一鍵部署:只需一條指令即可部署到 GitHub Pages, Heroku 或其他平臺(tái)。
-
插件和可擴(kuò)展性:這個(gè)也是hexo很強(qiáng)大的一個(gè)地方,強(qiáng)大的 API 帶來無限的可能,與數(shù)種模板引擎(EJS,Pug,Nunjucks)和工具(Babel,PostCSS,Less/Sass)輕易集成
Hexo博客框架搭建:
我們使用Centos7系統(tǒng)作為演示,使用其他linux系統(tǒng)也是可以的,只需要更換為對(duì)應(yīng)Linux版本的軟件安裝命令即可。
1.安裝Git
直接使用yum安裝即可,在命令行輸入 yum -y install git
完成之后輸入git version 查看是否安裝成功,如果顯示git版本信息即為成功,如下:
2.安裝Node.js
Node.js是一種運(yùn)行在服務(wù)端的JavaScript,是一個(gè)基于Chrome JavaScript運(yùn)行時(shí)建立的一個(gè)平臺(tái)。
Hexo基于Node.js,所以安裝Node.js是必須的一個(gè)操作,安裝步驟如下:
2.1:下載安裝包:
wget https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.xz
2.2:解壓縮軟件包并配置環(huán)境變量:
tar -xvJf node-v6.10.1-linux-x64.tar.xz mv node-v6.10.1-linux-x64 /usr/local/node-v6 ln -s /usr/local/node-v6/bin/node /bin/node ln -s /usr/local/node-v6/bin/npm /bin/npm echo 'export PATH=/usr/local/node-v6/bin:$PATH' >> /etc/profile source /etc/profile
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
2.3:測(cè)試是否安裝成功:
在命令行輸入node -v 和 npm -v,若是顯示出了版本號(hào),即為安裝成功:
3.安裝并使用Hexo
Hexo的安裝較為簡單,使用如下命令安裝
npm install -g hexo-cli npm config set registry https://registry.npm.taobao.org
3.1:初始化Hexo
上面的安裝完成之后執(zhí)行下面的命令進(jìn)行對(duì)Hexo進(jìn)行一個(gè)初始化
hexo init <文件名字> cd 文件名字 npm install
可以看到安裝好之后的一個(gè)目錄結(jié)構(gòu):
目錄文件說明:
_config.yml:網(wǎng)站的配置信息,您可以在此配置大部分的參數(shù)。
package.json:應(yīng)用程序的信息。EJS, Stylus 和 Markdown renderer 已默認(rèn)安裝,您可以自由移除。
scaffolds:模版文件夾。當(dāng)您新建文章時(shí)Hexo 會(huì)根據(jù) scaffold 來建立文件Hexo的模板是指在新建的文章文件中默認(rèn)填充的內(nèi)容。例如,如果您修改scaffold/post.md中的Front-matter內(nèi)容,那么每次新建一篇文章時(shí)都會(huì)包含這個(gè)修改。
source:資源文件夾是存放用戶資源的地方。除 _posts
文件夾之外,開頭命名為 _
(下劃線)的文件 / 文件夾和隱藏的文件將會(huì)被忽略。Markdown 和 HTML 文件會(huì)被解析并放到 public
文件夾,而其他文件會(huì)被拷貝過去。
themes:主題 文件夾。Hexo 會(huì)根據(jù)主題來生成靜態(tài)頁面。
查看hexo的版本以及對(duì)應(yīng)的數(shù)據(jù):
3.2生成靜態(tài)文件,并開啟Hexo服務(wù):
進(jìn)入到了hexo的安裝目錄之后,使用hexo generate來生成靜態(tài)文件,也可以使用hexo g,之后使用hexo server(可以寫成hexo s)命令啟動(dòng)服務(wù),操作如下:
可以看到4000端口的服務(wù)已經(jīng)開啟,之后在你的瀏覽器輸入http://<你的linux機(jī)器的ip地址或者服務(wù)器公網(wǎng)地址>:4000,如下可以看到最開始的一個(gè)界面:
4.初步使用Hexo:
使用前,我們對(duì)我們的站點(diǎn)進(jìn)行一個(gè)配置,也就是我們創(chuàng)建的hexo目錄的_config.yml文件,可以修改的部分介紹如下:
# Site
title: QIMING.INFO #博客網(wǎng)站的標(biāo)題
subtitle: #博客網(wǎng)站的副標(biāo)題
description: #你的網(wǎng)站描述
keywords: #網(wǎng)站的關(guān)鍵詞
author: #作者的名字
language: #博客網(wǎng)站使用的語言
timezone: #網(wǎng)站時(shí)區(qū)
我自己的修改如下供大家參考,這里的修改沒有太大的限制:
4.1:開始使用Hexo發(fā)布自己的第一篇博客!
執(zhí)行下面的目錄創(chuàng)建一篇新文章:
hexo new post <文章標(biāo)題>
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)]
這里我創(chuàng)建了一篇標(biāo)題為First_Blog的博客,創(chuàng)建之后hexo目錄下面的source/_post文件夾下會(huì)產(chǎn)生一個(gè)First_Blog.md的文件
4.2:編輯文章
進(jìn)入到上面說的那個(gè)目錄下可以看到我們創(chuàng)建的博客文件:
直接使用vim或者vi就可以對(duì)我們的博客文章進(jìn)行編輯了,打開此First_Blog.md后可以看到—分隔的區(qū)域,這部分主要對(duì)文章進(jìn)行標(biāo)注變量,如下:
title:標(biāo)題
tage:標(biāo)簽
categories:分類
date:時(shí)間
這些標(biāo)注大家在-----區(qū)域可以進(jìn)行使用
4.3:發(fā)布文章
輸入如下命令,生成靜態(tài)網(wǎng)頁,靜態(tài)網(wǎng)頁會(huì)存放在public文件下
hexo g
hexo s
之后就可以去瀏覽器訪問了!可以看到我們發(fā)布的文章已經(jīng)成功在瀏覽器顯示,到這里個(gè)人博客網(wǎng)站就已經(jīng)成功搭建了。
5.主題的選擇:
主題網(wǎng)站:https://hexo.io/themes/ hexo提供了大量精美的主題供我們選擇,選擇喜歡的主題,在hexo目錄下的themes文件夾下使用git clone下載主題,之后再配置文件_config.yml把theme后面修改成下載的主題的名字,之后運(yùn)行hexo clean ,hexo g即可看到生效的主題。
將Hexo部署上線到服務(wù)器:
如果是有服務(wù)器的小伙伴,也可以將Hexo部署到服務(wù)器供全網(wǎng)訪問,服務(wù)器的購買這里就不多說,阿里云跟騰訊云上面對(duì)于學(xué)生也有較為優(yōu)惠的價(jià)格。部署到服務(wù)器的話,就需要將上面的全部操作,在你的服務(wù)器系統(tǒng)上面執(zhí)行,之后我們使用Nginx(反向代理服務(wù)器)進(jìn)行部署。
Nginx安裝:
Nginx是一款高性能的 HTTP 和反向代理服務(wù)器,這里我們采用編譯安裝的方式,按照下面的指引依次執(zhí)行命令
yum install -y gcc-c++ yum install -y zlib-devel yum install -y openssl openssl-devel 下載地址:https://ftp.pcre.org/pub/pcre/ tar -xf pcre-8.43.tar.gz cd pcre-8.43 mkdir -p /usr/local/pcre
./configure --prefix=/usr/local/pcre make && make install
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
下載編譯安裝nginx:
nginx下載官網(wǎng):http://nginx.org/en/download.html wget http://nginx.org/download/nginx-1.16.0.tar.gz mkdir -p /usr/local/nginx tar -xf nginx-1.16.0.tar.gz cd nginx-1.16.0
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_stub_status_module --with-pcre make && make install
啟動(dòng)nginx服務(wù):
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf /usr/local/nginx/sbin/nginx -t /usr/local/nginx/sbin/nginx -s stop systemctl enable nginx
之后我們需要配置服務(wù)器公網(wǎng)ip,編輯配置文件。
之后再重啟nginx服務(wù),開啟hexo服務(wù),這個(gè)時(shí)候使用公網(wǎng)的ip就可以訪問到我們的hexo服務(wù)了!
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。
文章來源:csdn 作者:YO哥教你大數(shù)據(jù)
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)