記錄帶新人的那些事,主要是一些工作技巧上的分享
最近因?yàn)槊τ陧?xiàng)目,所以都沒時(shí)間更新文章了,正好也在帶幾個(gè)實(shí)習(xí)小妹。所以也建議他們要善于思考,學(xué)會(huì)總結(jié),多寫寫筆記,便于記憶與查閱。
授人以魚不如授人以漁。
當(dāng)然了,在你寫寫筆記的同時(shí),也可以以博客的形式發(fā)表個(gè)人的筆記,現(xiàn)在網(wǎng)絡(luò)上又很多博客平臺(tái),我們都可以直接在上面發(fā)表,但是在這些平臺(tái)存在比較不自由,會(huì)受到各種限制等等。所以,你就可以考慮搭建一個(gè)屬于自己的平臺(tái),一個(gè)在網(wǎng)絡(luò)世界中屬于自己的家。
好記性不如爛筆頭,將網(wǎng)絡(luò)筆記當(dāng)做自己的網(wǎng)絡(luò)中的家,可以隨時(shí)隨地的查看,不受限制。
如果你有足夠的成本和時(shí)間,完全可以自己寫一個(gè)博客程序,通過購買服務(wù)器并部署自己編寫的博客程序,定期的維護(hù),通過這種方式搭建屬于自己的家。當(dāng)然了,這種方式可行但卻太耗精力和成本。所以有的人建議,在github page平臺(tái)上托管我們的博客。這樣就可以安心的來寫作,又不需要定期維護(hù),而且hexo作為一個(gè)快速簡潔的博客框架,用它來搭建博客真的非常容易。
各抒己見,每個(gè)人都可以通過自己的方式搭建一個(gè)家。
我來說說寫博客的好處吧:
當(dāng)你把經(jīng)驗(yàn)的總結(jié)寫成博客的時(shí)候思路會(huì)很清晰,會(huì)有新的啟發(fā),尤其是自己實(shí)踐過后的思考總結(jié);
當(dāng)遇到問題,并解決的時(shí)候,可以給自己的技術(shù)和解決思路做存檔,加深記憶,這樣即使過一段時(shí)間忘了或者以后需要又或者遇到相同問題的時(shí)候,你就可以打開自己的博客看到自己的記錄了;
可以記錄自己的成長,記錄自己的工作與生活;
當(dāng)然了,博客給你帶來的另一些價(jià)值利益好處就不言而喻了。
總的來說,你寫了博客和不寫,肯定收獲是不一樣的。
而在本文中,采取的方式利用hexo作為一個(gè)快速簡潔的博客框架,用它來搭建博客,但因?yàn)椴渴鹜泄艿絞ithub page平臺(tái)上有時(shí)候網(wǎng)絡(luò)受限訪問太慢了,所以就托管到并發(fā)布部署到自己的服務(wù)器上。這樣不僅可以快速搭建訪問博客也能將數(shù)據(jù)保存在自己手上。
Hexo是一款基于Node.js的靜態(tài)博客框架, 可以快速生成靜態(tài)文件,訪問速度快;
方便快捷,可以搭建一個(gè)自由的個(gè)人博客,不需要后臺(tái);
數(shù)據(jù)安全,可以自行保存自己的筆記數(shù)據(jù);
博客內(nèi)容文章可以輕松快速打包、轉(zhuǎn)移、發(fā)布到其它平臺(tái)。
安裝git客戶端 (為了展示效果,我是用的window環(huán)境下安裝git客戶端)
安裝node.js (這個(gè)可以看之前的文章)
有一個(gè)個(gè)人github賬號(hào)(沒有的可以注冊(cè)一個(gè))(如果有服務(wù)器的話,可以直接使用服務(wù)器)
(本文不對(duì)git部署方式進(jìn)行說明,可自行網(wǎng)上查閱。)
熟悉markdown語法。(便于后續(xù)通過markdown語法編寫文章)
官網(wǎng)建議Node.js 版本需不低于 10.13,建議使用 Node.js 12.0 及以上版本。
本文用的環(huán)境:
node.js@ 12.13.1 ( 指令 :node -v)
hexo @ 5.1.1 ( 指令 :hexo -v)
git @ 2.24 ( 指令 :git version)
npm install -g hexo
注意:
安裝以后,可以通過 Hexo指定的方式執(zhí)行相應(yīng)的操作。
如果出現(xiàn) hexo不存在的情況,需要將 Hexo 所在的目錄下的
node_modules
添加到環(huán)境變量之中即可直接使用hexo <command>
環(huán)境變量下:
在指定文件位置新建一個(gè)文件夾,如果本文的路徑F:\site
, 切換到相應(yīng)的文件夾目錄后,通過初始化的
方式將代碼存放在這個(gè)文件目錄下
hexo init
初始化后生成的以下目錄結(jié)構(gòu)如下:
hexo g
執(zhí)行生成指令后,文件目錄下就會(huì)有public文件夾,對(duì)應(yīng)的生成相關(guān)的html文件。這個(gè)public文件夾目錄下的文件是可以進(jìn)行部署個(gè)人服務(wù)器發(fā)布或提交到github上面進(jìn)行部署的。
hexo s
啟動(dòng)服務(wù),這個(gè)是可以進(jìn)行本地預(yù)覽效果的,默認(rèn)端口4000,打開就可以看到你即將部署的站點(diǎn)的模樣了。
通過以上步驟,hexo已經(jīng)為我們搭建一個(gè)站點(diǎn)的框架和默認(rèn)的主題樣式。當(dāng)然了,你也可以根據(jù)自己的喜歡選擇相應(yīng)的官方主題進(jìn)行修改。
本文采用的主題是 hexo-theme-matery, 當(dāng)然了,我自己現(xiàn)在用的也是這個(gè)主題。
切換到目錄 F:\site\themes
執(zhí)行下載主題
git clone https://github.com/blinkfox/hexo-theme-matery.git
下載完之后,將F:\site
目錄下的_config.yml
中的theme:landscape
改為我們想要的主題theme: hexo-theme-matery
, 然后再次執(zhí)行 hexo g
指令重新生成。
如果出現(xiàn)問題,可以嘗試先執(zhí)行
hexo clean
清理public文件夾的內(nèi)容,再重新生成hexo g
和發(fā)布。
再次啟動(dòng)服務(wù)hexo s
,這次可以預(yù)覽到的效果就是我們更換主題后想要的效果了。
categories
頁是用來展示所有分類的頁面,如果在你的博客 source
目錄下還沒有 categories/index.md
文件,那么你就需要新建一個(gè),命令如下:
hexo new page "categories"
編輯你剛剛新建的頁面文件 /source/categories/index.md
,至少需要以下內(nèi)容:
--- title: "分類" date: 2020-09-13 17:06:27 type: "categories" layout: "categories" ---
tags
頁是用來展示所有標(biāo)簽的頁面,如果在你的博客 source
目錄下還沒有 tags/index.md
文件,那么你就需要新建一個(gè),命令如下:
hexo new page "tags"
編輯你剛剛新建的頁面文件 /source/tags/index.md
,至少需要以下內(nèi)容:
--- title: "標(biāo)簽" date: 2020-09-13 17:07:18 type: "tags" layout: "tags" ---
about
頁是用來展示關(guān)于我和我的博客信息的頁面,如果在你的博客 source
目錄下還沒有 about/index.md
文件,那么你就需要新建一個(gè),命令如下:
hexo new page "about"
編輯你剛剛新建的頁面文件 /source/about/index.md
,至少需要以下內(nèi)容:
--- title: about date: 2020-09-13 17:07:42 type: "about" layout: "about" ---
如果在你的博客 source
目錄下還沒有 404.md
文件,那么你就需要新建一個(gè)
編輯你剛剛新建的頁面文件 /source/404.md
,至少需要以下內(nèi)容:
--- title: 404 date: 2018-09-30 17:25:30 type: "404" layout: "404" description: "Oops~,我崩潰了!找不到你想要的頁面 :(" ---
由于 Hexo 自帶的代碼高亮主題顯示不好看,所以主題中使用到了 hexo-prism-plugin 的 Hexo 插件來做代碼高亮,安裝命令如下:
npm i -S hexo-prism-plugin
然后,修改 Hexo 根目錄下 _config.yml
文件中 highlight.enable
的值為 false
,并新增 prism
插件相關(guān)的配置,主要配置如下:
highlight: enable: false prism_plugin: mode: 'preprocess' # realtime/preprocess theme: 'tomorrow' line_number: false # default false custom_css:
本主題中還使用到了 hexo-generator-search 的 Hexo 插件來做內(nèi)容搜索,安裝命令如下:
npm install hexo-generator-search --save
在 Hexo 根目錄下的 _config.yml
文件中,新增以下的配置項(xiàng):
search: path: search.xml field: post
如果你的文章名稱是中文的,那么 Hexo 默認(rèn)生成的永久鏈接也會(huì)有中文,這樣不利于 SEO
,且 gitment
評(píng)論對(duì)中文鏈接也不支持。我們可以用 hexo-permalink-pinyin Hexo 插件使在生成文章時(shí)生成中文拼音的永久鏈接。
安裝命令如下:
npm i hexo-permalink-pinyin --save
在 Hexo 根目錄下的 _config.yml
文件中,新增以下的配置項(xiàng):
permalink_pinyin: enable: true separator: '-' # default: '-'
注:除了此插件外,hexo-abbrlink 插件也可以生成非中文的鏈接。
更多具體的操作,可以查閱該主題的具體的操作文檔說明。
根據(jù)上文自定義的方式配置主題后,根據(jù)自己的需求,修改對(duì)應(yīng)的信息之后,發(fā)布部署。
如果沒有服務(wù)器的可以通過注冊(cè)github賬號(hào),通過github pages服務(wù)搭建博客。(具體的github發(fā)布hexo可以網(wǎng)上查閱)
因?yàn)閯偤糜幸粋€(gè)服務(wù)器可以使用,暫用的空間也不大,所以我就直接將發(fā)布后的文件部署到服務(wù)器上了。綁定后域名后,就可以進(jìn)行訪問。
可以得到如下的效果。
站點(diǎn)地址: http://www.i3yuan.top
`hexo init` #初始化XX文件夾名稱 `hexo n "我的第一篇文章"` # 等價(jià)于 `hexo new "我的第一篇文章"`還等價(jià)于`hexo new post "我的第一篇文章"` `hexo p` 等價(jià)于 `hexo publish` #通過 publish 命令將草稿移動(dòng)到 source/_posts 文件夾 `hexo g` 等價(jià)于 `hexo generate` # 生成靜態(tài)網(wǎng)頁(生成在public文件夾) `hexo s`等價(jià)于 `hexo server` # Hexo 會(huì)監(jiān)視文件變動(dòng)并自動(dòng)更新,除修改站點(diǎn)配置文件外,無須重啟服務(wù)器,直接刷新網(wǎng)頁即可生效。 `hexo d` 等價(jià)于 `hexo deploy` # 將本地?cái)?shù)據(jù)部署到遠(yuǎn)端服務(wù)器(如github) `hexo deploy -g` 等價(jià)于 `hexo deploy --generate` `hexo generate -d`等價(jià)于`hexo generate --deploy `hexo clean` #清除緩存 ,網(wǎng)頁正常情況下可以忽略此條命令,執(zhí)行該指令后,會(huì)刪掉站點(diǎn)根目錄下的public文件夾
注: hexo clean 沒有 簡寫, git --version 沒有簡寫
npm update hexo -g
#升級(jí)npm install hexo -g
#安裝node-v
#查看node.js版本號(hào)npm -v
#查看npm版本號(hào)git --version
#查看git版本號(hào)hexo -v
#查看hexo版本號(hào)
網(wǎng)頁將代碼中片的 {} 解析為 {
的錯(cuò)誤
錯(cuò)誤這個(gè)問題,無法轉(zhuǎn)換{ }
,直接找到路徑node_modules/hexo_prism_plugin/src/index.js
下的文件,代碼如下:
const map = { ''': '\'', '&': '&', '>': '>', '<': '<', '"': '"' };
解決方法就是多加{
和}
對(duì)花括號(hào)的轉(zhuǎn)義
const map = { ''': '\'', '&': '&', '>': '>', '<': '<', '"': '"', '{': '{', '}': '}' };
這里的采用的方式是直接找到對(duì)應(yīng)的源碼修改代碼里面內(nèi)容,實(shí)現(xiàn)花括號(hào)轉(zhuǎn)換問題。當(dāng)然了,你也可以采取別的方式,歡迎指定,提出更好的方案。
如果你在使用搭建過程中也遇到其他問題,可以評(píng)論提出,方便大家一并學(xué)習(xí)匯總。
在后續(xù)中我們可以通過Markdown編寫博客文章,發(fā)布到各個(gè)平臺(tái)的同時(shí),也可以發(fā)布到自己搭建的個(gè)人博客站點(diǎn),方便自己學(xué)習(xí)記錄,便于查閱。
如果有不對(duì)的或不理解的地方,希望大家可以多多指正,提出問題,一起討論,不斷學(xué)習(xí),共同進(jìn)步。
本文中參考資料: Hexo官方簡介 、hexo-theme-matery主題
聯(lián)系客服