不可思議,免費搭技術博客只需一個GitHub賬號

引言

作為程序員擁有一個屬於自己的個人技術博客,絕對是百利無一害的事,不僅方便出門裝b,面試時亮出博客地址也會讓面試官對你的好感度倍增。經常能在很多大佬的技術文章的文末,看到這樣一句話: “歡迎大家訪問我的博客”,每每看到這都會覺得好酷,同樣是搞技術為啥人家那麼優秀。而自己想要建一個博客,要麼怕花錢,要麼怕過程太麻煩,最後就不了了之。

應粉絲要求,今天手把手,嘴對嘴(放心吧,我才不稀罕親你)的教大家搭建一個屬於自己的技術博客,只要你有個github地址就行!還等啥呢?騷年,開整吧!

一、Hexo是個啥?

Hexo今天的主角,它是一款基於Node.js的靜態博客(無需與後臺交互,全由靜態頁面組成)框架,依賴少易於安裝簡單,更主要的是它免費啊,而且可以輕鬆的將生成的靜態網頁託管在GitHub,碼雲和Coding上,搭建博客首選框架之一。

二、準備工作

1、git安裝

git下載地址:https://gitforwindows.org

不可思議,免費搭技術博客只需一個GitHub賬號


安裝完成後,檢查git是否安裝成功,如下顯示即為成功。


<code>1$ git --version
2git version 2.12.2.windows.2/<code>

注意: 這裡建議下邊使用的所有命令,均在git命令行中執行,cmd中執行命令容易出現錯誤。

2、node.js安裝

node.js 下載地址:https://nodejs.org/en/,選擇穩定版本即可,node.js的安裝非常簡單,一步一步next即可。

不可思議,免費搭技術博客只需一個GitHub賬號


安裝完檢查node是否安裝成功,如下顯示即為成功。


<code>1$ node -v
2v12.16.1
3L8000100617811+51536@L8000100617811 MINGW64 /d/myblog
4$ npm -v
56.13.4/<code>

三、Hexo 本地搭建

在你自己覺得最可愛的磁盤裡,建一個文件夾專門用來存 myblog博客相關的文件。 文件夾內右鍵打開 Git Bash Here,在此窗口內執行以下所有命令。

不可思議,免費搭技術博客只需一個GitHub賬號

1、安裝 Hexo

用npm安裝hexo,由於國內網絡高“牆”深院,避免安裝緩慢或失敗,這裡切換阿里的NPM鏡像,沒辦法只能採用迂迴戰術了。

<code>1$ npm install -g cnpm --registry=https://registry.npm.taobao.org/<code>

用 cnpm 安裝 hexo

<code>1$ cnpm install -g hexo-cli/<code>

安裝可能有一些緩慢,當然這還是取決於你的帶寬,這個過程中會出現的WARN提示不用理會。

<code>1$ cnpm install hexo --save/<code>

到這hexo就安裝好了,檢查一下hexo -v是否安裝成功

<code> 1$ hexo -v
2hexo-cli: 3.1.0
3os: Windows_NT 10.0.18362 win32 x64
4node: 12.16.1
5v8: 7.8.279.23-node.31
6uv: 1.34.0
7zlib: 1.2.11
8brotli: 1.0.7
9ares: 1.15.0
10modules: 72
11nghttp2: 1.40.0
12napi: 5
13llhttp: 2.0.4
14http_parser: 2.9.3
15openssl: 1.1.1d
16cldr: 35.1
17icu: 64.2
18tz: 2019c
19unicode: 12.1/<code>

2、初始化 Hexo

Hexo安裝完以後需要進行初始化操作。

<code>1 $ hexo init/<code>

注意:這時需要在myblog文件中,創建一個新的文件夾用來存放hexo博客文件。否則執行hexo init命令會報錯。

不可思議,免費搭技術博客只需一個GitHub賬號

進入hexo文件夾內右鍵打開 Git Bash Here,在此窗口內執行後邊的所有命令。

<code>1$ hexo init 

2FATAL D:\\myblog not empty, please run `hexo init` on an empty folder and then copy your files into it
3FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
4Error: target not empty
5    at Context.initConsole (C:\\Users\\51536\\AppData\\Roaming\\npm\\node_modules\\hexo-cli\\lib\\console\\init.js:23:27)
6/<code>

初始化成功後,hexo文件夾內會出現如下的文件:

node_modules: 依賴包public:存放生成的頁面scaffolds:生成文章的一些模板source:用來存放你的文章themes:放下下載的主題_config.yml: 博客的核心配置文件(設置主體、標題等屬性)

不可思議,免費搭技術博客只需一個GitHub賬號


接著需要執行一下cnpm install命令,要不下邊的啟動會提示命令不合法。


<code>1cnpm install/<code>

最後用 hexo s -g 命令來啟動安裝好的 hexo。

<code>1$ hexo s -g
2INFO  Start processing
3INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop./<code>

直接訪問http://localhost:4000顯示如下頁面,本地博客搭建成功。

不可思議,免費搭技術博客只需一個GitHub賬號

四、Hexo 託管至 GitHub

1、創建GitHub倉庫

這時候需要我們在GitHub上創建一個倉庫,設置倉庫的名字以XXX.github.io結尾

不可思議,免費搭技術博客只需一個GitHub賬號

2、配置`_config.yml`文件

修改_config.yml文件,添加你創建的GitHub倉庫地址

<code>1deploy:
2  type: git
3  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
4  branch: master/<code>

安裝部署命令deploy-git ,這樣你才能用命令部署到GitHub。

<code>1$ cnpm install hexo-deployer-git  --save/<code>

上邊修改完畢以後,依次執行以下命令,提交本地hexo文件到GitHub。

<code>1hexo clean
2hexo generate
3hexo deploy/<code>

3、線上測試

訪問剛創建的倉庫:https://chengxy-nds.github.io/,文件推送至GitHub後頁面顯示會有一定的延遲,稍等幾十秒再次刷新頁面,看到下邊這些頁面就表示博客部署成功。

不可思議,免費搭技術博客只需一個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

不可思議,免費搭技術博客只需一個GitHub賬號

在這裡插入圖片描述

然後在本地博客文件source中創建一個名為CNAME文件,不要後綴。寫上你的域名。

不可思議,免費搭技術博客只需一個GitHub賬號


最後重新編譯上傳文件,訪問:chengxy.com即可。


<code>1hexo clean
2hexo generate
3hexo deploy/<code>

五、Hexo主題切換

雖然我們的博客搭建完成,但大家肯定也發現,現有的博客樣式醜爆了,這時候就需要到官網挑一個自己喜歡的風格了。

1、下載主題

hexo主體官網:https://hexo.io/themes/,我們隨便找一個主題替換演示一下,主題都託管在github上,直接clone就好。

不可思議,免費搭技術博客只需一個GitHub賬號

2、配置`_config.yml`

可以看到hexo 只有一個默認的主題theme,現在進入theme文件夾執行git克隆命令,或者直接下載一個主題放入theme文件夾內都可以。

<code>1git clone https://github.com/yelog/hexo-theme-3-hexo.git/<code>

修改_config.yml文件中的theme屬性

<code>1theme: hexo-theme-3-hexo/<code>

打包上傳看看效果:

<code>1hexo clean
2hexo generate
3hexo deploy/<code>

3、測試

nice!主題已經替換成功,是比自帶的好卡不少

不可思議,免費搭技術博客只需一個GitHub賬號

六、Hexo基本操作

博客搭建完,接下來就要開始寫博客,管理博客了~

創建我們的第一篇博客,會在source\\_posts目錄下生成一個程序員內點事的第一篇博客.md文件

<code>1hexo n 程序員內點事的第一篇博客/<code>

hexo基本配置

_config.yml是hexo框架最核心的文件,博客的配置基本在這裡。

<code> 1#博客名稱
2title: 我的博客
3#副標題
4subtitle: 一天進步一點
5#簡介
6description: 記錄生活點滴
7#博客作者
8author: John Doe
9#博客語言
10language: zh-CN
11#時區
12timezone:
13
14#博客地址,與申請的GitHub一致
15url: http://elfwalk.github.io
16root: /
17#博客鏈接格式
18permalink: :year/:month/:day/:title/
19permalink_defaults:
20
21source_dir: source

22public_dir: public
23tag_dir: tags
24archive_dir: archives
25category_dir: categories
26code_dir: downloads/code
27i18n_dir: :lang
28skip_render:
29
30new_post_name: :title.md # File name of new posts
31default_layout: post
32titlecase: false # Transform title into titlecase
33external_link: true # Open external links in new tab
34filename_case: 0
35render_drafts: false
36post_asset_folder: false
37relative_link: false
38future: true
39highlight:
40  enable: true
41  line_number: true
42  auto_detect: true
43  tab_replace:
44
45default_category: uncategorized
46category_map:
47tag_map:
48
49#日期格式
50date_format: YYYY-MM-DD
51time_format: HH:mm:ss
52
53#分頁,每頁文章數量
54per_page: 10
55pagination_dir: page
56
57#博客主題
58theme: landscape
59
60#發佈設置
61deploy: 
62  type: git
63  #elfwalk改為你的github用戶名
64  repository: https://github.com/elfwalk/elfwalk.github.io.git
65  branch: master/<code>

總結

至此,我們整個hexo博客就搭建完了,其實還是比較簡單的,但到這裡我們萬里長征也只是走了第一步,後續還有更細緻的操作,例如:博客建分類、標籤、佈局等,讓我們的博客變得美美噠!

感悟

從正式成為一名程序員的那天起,註定要進行沒有止境的學習,想要進階高級或者專家,就要堅持每天都高效的學習,不要給自己的懶惰找藉口,“我也想學習可是又沒有資源”,這次我給你整理好了,我看你還有啥理由!轉發或者私信 回覆【666】送給你

不可思議,免費搭技術博客只需一個GitHub賬號


分享到:


相關文章: