引言
作為程序員擁有一個屬於自己的個人技術博客,絕對是百利無一害的事,不僅方便出門裝b,面試時亮出博客地址也會讓面試官對你的好感度倍增。經常能在很多大佬的技術文章的文末,看到這樣一句話: “歡迎大家訪問我的博客”,每每看到這都會覺得好酷,同樣是搞技術為啥人家那么優秀。而自己想要建一個博客,要么怕花錢,要么怕過程太麻煩,最后就不了了之。
應粉絲要求,今天手把手,嘴對嘴(放心吧,我才不稀罕親你)的教大家搭建一個屬於自己的技術博客,只要你有個github
地址就行!還等啥呢?騷年,開整吧!
一、Hexo是個啥?
Hexo今天的主角,它是一款基於Node.js
的靜態博客(無需與后台交互,全由靜態頁面組成)框架,依賴少易於安裝簡單,更主要的是它免費啊,而且可以輕松的將生成的靜態網頁托管在GitHub
,碼雲
和Coding
上,搭建博客首選框架之一。
二、准備工作
1、git安裝
git
下載地址:https://gitforwindows.org
安裝完成后,檢查git是否安裝成功,如下顯示即為成功。
$ git --version
git version 2.12.2.windows.2
注意: 這里建議下邊使用的所有命令,均在git
命令行中執行,cmd
中執行命令容易出現錯誤。
2、node.js安裝
node.js
下載地址:https://nodejs.org/en/
,選擇穩定版本即可,node.js
的安裝非常簡單,一步一步next即可。
安裝完檢查node
是否安裝成功,如下顯示即為成功。
$ node -v
v12.16.1
L8000100617811+51536@L8000100617811 MINGW64 /d/myblog
$ npm -v
6.13.4
三、Hexo 本地搭建
在你自己覺得最可愛
的磁盤里,建一個文件夾專門用來存 myblog
博客相關的文件。 文件夾內右鍵打開 Git Bash Here
,在此窗口內執行以下所有命令。
1、安裝 Hexo
用npm
安裝hexo
,由於國內網絡高“牆”深院,避免安裝緩慢或失敗,這里切換阿里的NPM
鏡像,沒辦法只能采用迂回戰術了。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
用 cnpm
安裝 hexo
$ cnpm install -g hexo-cli
安裝可能有一些緩慢,當然這還是取決於你的帶寬,這個過程中會出現的WARN
提示不用理會。
$ cnpm install hexo --save
到這hexo
就安裝好了,檢查一下hexo -v
是否安裝成功
$ hexo -v
hexo-cli: 3.1.0
os: Windows_NT 10.0.18362 win32 x64
node: 12.16.1
v8: 7.8.279.23-node.31
uv: 1.34.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.40.0
napi: 5
llhttp: 2.0.4
http_parser: 2.9.3
openssl: 1.1.1d
cldr: 35.1
icu: 64.2
tz: 2019c
unicode: 12.1
2、初始化 Hexo
Hexo
安裝完以后需要進行初始化操作。
$ hexo init
注意:這時需要在myblog
文件中,創建一個新的文件夾用來存放hexo
博客文件。否則執行hexo init
命令會報錯。
進入hexo文件
夾內右鍵打開 Git Bash Here
,在此窗口內執行后邊的所有命令。
$ hexo init
FATAL D:\myblog not empty, please run `hexo init` on an empty folder and then copy your files into it
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: target not empty
at Context.initConsole (C:\Users\51536\AppData\Roaming\npm\node_modules\hexo-cli\lib\console\init.js:23:27)
初始化成功后,hexo文件
夾內會出現如下的文件:
node_modules
: 依賴包
public
:存放生成的頁面
scaffolds
:生成文章的一些模板
source
:用來存放你的文章
themes
:放下下載的主題
_config.yml:
博客的核心配置文件(設置主體、標題等屬性)
接着需要執行一下cnpm install
命令,要不下邊的啟動會提示命令不合法。
cnpm install
最后用 hexo s -g
命令來啟動安裝好的 hexo
。
$ hexo s -g
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
直接訪問http://localhost:4000
顯示如下頁面,本地博客搭建成功。
四、Hexo 托管至 GitHub
1、創建GitHub倉庫
這時候需要我們在GitHub
上創建一個倉庫,設置倉庫的名字以XXX.github.io
結尾
2、配置_config.yml
文件
修改_config.yml
文件,添加你創建的GitHub
倉庫地址
deploy:
type: git
repo: https://github.com/YourgithubName/YourgithubName.github.io.git
branch: master
安裝部署命令deploy-git
,這樣你才能用命令部署到GitHub
。
$ cnpm install hexo-deployer-git --save
上邊修改完畢以后,依次執行以下命令,提交本地hexo
文件到GitHub
。
hexo clean
hexo generate
hexo deploy
3、線上測試
訪問剛創建的倉庫:https://chengxy-nds.github.io/
,文件推送至GitHub后頁面顯示會有一定的延遲,稍等幾十秒再次刷新頁面,看到下邊這些頁面就表示博客部署成功。
4、設置個人域名
現在我們的博客地址:https://chengxy-nds.github.io/
,但是看着是不是覺得有點low,如果有錢自己可以買一個域名。在雲平台隨便買一個,看自己喜好,例如:chengxy.com。
將域名指向GitHub
的服務器地址, 192.30.252.153
和 192.30.252.154
。
進入存放博客的GitHub
倉庫,點擊settings
,設置Custom domain
,輸入域名chengxy.com
然后在本地博客文件source
中創建一個名為CNAME
文件,不要后綴。寫上你的域名。
最后重新編譯上傳文件,訪問:chengxy.com
即可。
hexo clean
hexo generate
hexo deploy
五、Hexo主題切換
雖然我們的博客搭建完成,但大家肯定也發現,現有的博客樣式丑爆了,這時候就需要到官網挑一個自己喜歡的風格了。
1、下載主題
hexo
主體官網:https://hexo.io/themes/
,我們隨便找一個主題替換演示一下,主題都托管在github上,直接clone就好。
2、配置_config.yml
可以看到hexo
只有一個默認的主題theme
,現在進入theme
文件夾執行git
克隆命令,或者直接下載一個主題放入theme
文件夾內都可以。
git clone https://github.com/yelog/hexo-theme-3-hexo.git
修改_config.yml
文件中的theme
屬性
theme: hexo-theme-3-hexo
打包上傳看看效果:
hexo clean
hexo generate
hexo deploy
3、測試
nice!主題已經替換成功,是比自帶的好卡不少
六、Hexo基本操作
博客搭建完,接下來就要開始寫博客,管理博客了~
創建我們的第一篇博客,會在source\_posts
目錄下生成一個程序員內點事的第一篇博客.md
文件
hexo n 程序員內點事的第一篇博客
hexo基本配置
_config.yml
是hexo
框架最核心的文件,博客的配置基本在這里。
#博客名稱
title: 我的博客
#副標題
subtitle: 一天進步一點
#簡介
description: 記錄生活點滴
#博客作者
author: John Doe
#博客語言
language: zh-CN
#時區
timezone:
#博客地址,與申請的GitHub一致
url: http://elfwalk.github.io
root: /
#博客鏈接格式
permalink: :year/:month/:day/:title/
permalink_defaults:
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace:
default_category: uncategorized
category_map:
tag_map:
#日期格式
date_format: YYYY-MM-DD
time_format: HH:mm:ss
#分頁,每頁文章數量
per_page: 10
pagination_dir: page
#博客主題
theme: landscape
#發布設置
deploy:
type: git
#elfwalk改為你的github用戶名
repository: https://github.com/elfwalk/elfwalk.github.io.git
branch: master
總結
至此,我們整個hexo
博客就搭建完了,其實還是比較簡單的,但到這里我們萬里長征也只是走了第一步,后續還有更細致的操作,例如:博客建分類、標簽、布局等,讓我們的博客變得美美噠!
感興趣的小伙伴不妨關注一波呦!
小福利:
幾百本各類技術電子書相送 ,噓~,免費 送給小伙伴們。關注公眾號回復【666】自行領取