手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

從零開始部署到上線:手把手教你搭建屬于自己的個(gè)人博客網(wǎng)站!

2021-5-28    前端達(dá)人

現(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í)也提供了大量精美的博客主題供我們使用。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-BUkzFJqh-1622032930743)(pictures/image-20210524011732509.png)]

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版本信息即為成功,如下:

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-gVJMnq6W-1622032930745)(pictures/image-20210526142911469.png)]

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  
  • 1

2.2:解壓縮軟件包并配置環(huán)境變量:

#解壓 tar -xvJf node-v6.10.1-linux-x64.tar.xz #移動(dòng)到/usl/lcoal目錄下 mv node-v6.10.1-linux-x64 /usr/local/node-v6 #創(chuàng)建軟鏈接 ln -s /usr/local/node-v6/bin/node /bin/node ln -s /usr/local/node-v6/bin/npm /bin/npm #添加環(huán)境變量 echo 'export PATH=/usr/local/node-v6/bin:$PATH' >> /etc/profile source /etc/profile #讓環(huán)境變量生效  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

2.3:測(cè)試是否安裝成功:

在命令行輸入node -v 和 npm -v,若是顯示出了版本號(hào),即為安裝成功:

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-47pt856h-1622032930748)(pictures/image-20210526143600103.png)]

3.安裝并使用Hexo

Hexo的安裝較為簡單,使用如下命令安裝

npm install -g hexo-cli #這里有一點(diǎn)要注意的就是,npm的源是在國外的,訪問可能會(huì)很慢,這里可以換成我們國內(nèi)的源進(jìn)行安裝加快速度。操作如下: npm config set registry https://registry.npm.taobao.org  
  • 1
  • 2
  • 3

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-TEjeb2E6-1622032930750)(pictures/image-20210526143826327.png)]

3.1:初始化Hexo

上面的安裝完成之后執(zhí)行下面的命令進(jìn)行對(duì)Hexo進(jìn)行一個(gè)初始化

#這個(gè)文件名字可以自己指定,之后會(huì)在當(dāng)前目錄下生成對(duì)應(yīng)文件夾 hexo init <文件名字> cd 文件名字 npm install  
  • 1
  • 2
  • 3
  • 4

可以看到安裝好之后的一個(gè)目錄結(jié)構(gòu):

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-raE9WJQX-1622032930751)(pictures/image-20210526144057199.png)]

目錄文件說明:

_config.yml:網(wǎng)站的配置信息,您可以在此配置大部分的參數(shù)。

package.json:應(yīng)用程序的信息。EJSStylus 和 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ù):

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-1B3aWxn9-1622032930752)(pictures/image-20210526144143747.png)]

3.2生成靜態(tài)文件,并開啟Hexo服務(wù):

進(jìn)入到了hexo的安裝目錄之后,使用hexo generate來生成靜態(tài)文件,也可以使用hexo g,之后使用hexo server(可以寫成hexo s)命令啟動(dòng)服務(wù),操作如下:

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-YuvIWOuI-1622032930753)(pictures/image-20210526144957135.png)]

可以看到4000端口的服務(wù)已經(jīng)開啟,之后在你的瀏覽器輸入http://<你的linux機(jī)器的ip地址或者服務(wù)器公網(wǎng)地址>:4000,如下可以看到最開始的一個(gè)界面:

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-w9ELcFFg-1622032930753)(pictures/image-20210526145217729.png)]

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ū)  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

我自己的修改如下供大家參考,這里的修改沒有太大的限制:

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-G0cTYgQ1-1622032930754)(pictures/image-20210526145734893.png)]

4.1:開始使用Hexo發(fā)布自己的第一篇博客!

執(zhí)行下面的目錄創(chuàng)建一篇新文章:

hexo new post <文章標(biāo)題>  
  • 1

[外鏈圖片轉(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)建的博客文件:

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-cuPREJLQ-1622032930756)(pictures/image-20210526150208204.png)]

直接使用vim或者vi就可以對(duì)我們的博客文章進(jìn)行編輯了,打開此First_Blog.md后可以看到—分隔的區(qū)域,這部分主要對(duì)文章進(jìn)行標(biāo)注變量,如下:

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-GOYKjBSu-1622032930756)(pictures/image-20210526150326264.png)]

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  
  • 1
  • 2

之后就可以去瀏覽器訪問了!可以看到我們發(fā)布的文章已經(jīng)成功在瀏覽器顯示,到這里個(gè)人博客網(wǎng)站就已經(jīng)成功搭建了。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-2ZpSg9fl-1622032930757)(pictures/image-20210526150824449.png)]

5.主題的選擇:

主題網(wǎng)站:https://hexo.io/themes/ hexo提供了大量精美的主題供我們選擇,選擇喜歡的主題,在hexo目錄下的themes文件夾下使用git clone下載主題,之后再配置文件_config.yml把theme后面修改成下載的主題的名字,之后運(yùn)行hexo clean ,hexo g即可看到生效的主題。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-eN5cZDmN-1622032930757)(pictures/image-20210526161641366.png)]


將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í)行命令

#安裝gcc編譯環(huán)境: yum install -y gcc-c++ #安裝zlib-devel庫: yum install -y zlib-devel #安裝OpenSSL密碼庫: yum install -y openssl openssl-devel #安裝pcre正則表達(dá)式庫:編譯nginx,需要需要指定pcre的路徑,這里我們選擇安裝穩(wěn)定版本的。 下載地址:https://ftp.pcre.org/pub/pcre/ #選擇對(duì)應(yīng)的版本下載下來之后上傳到我們的服務(wù)器,也可以使用wget直接下載 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 #編譯指定安裝路徑需要進(jìn)入nginx cd nginx-1.16.0
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_stub_status_module --with-pcre #http_ssl_module  這是支持https的一個(gè)模塊,就是可以使用https://這樣去訪問。 make && make install #編譯安裝  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

啟動(dòng)nginx服務(wù):

#啟動(dòng): /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf #用指定配置文件的方式啟動(dòng)  -c #測(cè)試: /usr/local/nginx/sbin/nginx -t #這個(gè)用于測(cè)試nginx的語法是否有問題 顯示is successful即為成功。 #關(guān)閉: /usr/local/nginx/sbin/nginx -s stop #繼續(xù)輸入以下命令使Nginx開機(jī)自動(dòng)啟動(dòng): systemctl enable nginx #配置文件的位置:/usr/local/nginx/conf  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

之后我們需要配置服務(wù)器公網(wǎng)ip,編輯配置文件。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-TOR7RVwA-1622032930758)(pictures/image-20210526174027780.png)]

之后再重啟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)系。

截屏2021-05-13 上午11.41.03.png


文章來源: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ù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔