碼云+Hexo 搭建簡單的個(gè)人博客

本文目的記錄學(xué)習(xí)個(gè)人博客搭建方法和過程。

1、碼云是什么?

碼云gitee.com

代碼托管·協(xié)作開發(fā)平臺(tái),開發(fā)者超過 300 萬,托管項(xiàng)目超過 500 萬,匯聚幾乎所有本土原創(chuàng)開源項(xiàng)目,并于 2016 年推出企業(yè)版,提供企業(yè)級(jí)代碼托管服務(wù),成為開發(fā)領(lǐng)域領(lǐng)先的 SaaS 服務(wù)提供商。

2、Hexo是什么?

Hexo
一個(gè)快速, 簡潔且高效的博客框架. 讓上百個(gè)頁面在幾秒內(nèi)瞬間完成渲染. 具有強(qiáng)大的插件整合系統(tǒng).

3、在碼云上創(chuàng)建項(xiàng)目

1.png

4、部署博客構(gòu)建環(huán)境

4.1 系統(tǒng)環(huán)境

[root@lixx ~]# cat /etc/redhat-release 
CentOS Linux release 7.6.1810 (Core)

4.2 安裝 git

[root@lixx ~]# yum install git -y

4.3 安裝 node.js:

https://github.com/nodesource/distributions

配置源

[root@lixx ~]# curl --silent --location https://rpm.nodesource.com/setup_12.x | bash -

## Installing the NodeSource Node.js 12.x repo...


## Inspecting system...

+ rpm -q --whatprovides redhat-release || rpm -q --whatprovides centos-release || rpm -q --whatprovides cloudlinux-release || rpm -q --whatprovides sl-release
+ uname -m

## Confirming "el7-x86_64" is supported...

+ curl -sLf -o /dev/null 'https://rpm.nodesource.com/pub_12.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'

## Downloading release setup RPM...

+ mktemp
+ curl -sL -o '/tmp/tmp.1ODcCnRP9B' 'https://rpm.nodesource.com/pub_12.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'

## Installing release setup RPM...

+ rpm -i --nosignature --force '/tmp/tmp.1ODcCnRP9B'

## Cleaning up...

+ rm -f '/tmp/tmp.1ODcCnRP9B'

## Checking for existing installations...

+ rpm -qa 'node|npm' | grep -v nodesource

## Run `sudo yum install -y nodejs` to install Node.js 12.x and npm.
## You may also need development tools to build native addons:
     sudo yum install gcc-c++ make
## To install the Yarn package manager, run:
     curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
     sudo yum install yarn

[root@lixx ~]# cat /etc/yum.repos.d/nodesource-el7.repo 
[nodesource]
name=Node.js Packages for Enterprise Linux 7 - $basearch
baseurl=https://rpm.nodesource.com/pub_12.x/el/7/$basearch
failovermethod=priority
enabled=1
gpgcheck=1
gpgkey=file:///etc/pki/rpm-gpg/NODESOURCE-GPG-SIGNING-KEY-EL

[nodesource-source]
name=Node.js for Enterprise Linux 7 - $basearch - Source
baseurl=https://rpm.nodesource.com/pub_12.x/el/7/SRPMS
failovermethod=priority
enabled=0
gpgkey=file:///etc/pki/rpm-gpg/NODESOURCE-GPG-SIGNING-KEY-EL
gpgcheck=1

安裝

[root@lixx ~]# yum install nodejs -y

4.4 部署Hexo

使用 npm 安裝 hexo :

[root@lixx ~]# npm install hexo-cli -g
/usr/bin/hexo -> /usr/lib/node_modules/hexo-cli/bin/hexo
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/hexo-cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ hexo-cli@2.0.0
added 187 packages from 433 contributors in 127.419s

5、構(gòu)建個(gè)人博客

5.1 使用 hexo 快速初始化一個(gè)博客框架

[root@lixx ~]# hexo init blog-demo
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
正克隆到 '/root/blog-demo'...
remote: Enumerating objects: 77, done.
remote: Total 77 (delta 0), reused 0 (delta 0), pack-reused 77
Unpacking objects: 100% (77/77), done.
子模組 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) 已為路徑 'themes/landscape' 注冊(cè)
正克隆到 'themes/landscape'...
remote: Enumerating objects: 976, done.
remote: Total 976 (delta 0), reused 0 (delta 0), pack-reused 976
接收對(duì)象中: 100% (976/976), 3.18 MiB | 701.00 KiB/s, done.
處理 delta 中: 100% (531/531), done.
子模組路徑 'themes/landscape':檢出 '73a23c51f8487cfcd7c6deec96ccc7543960d350'
INFO  Install dependencies
npm WARN deprecated core-js@1.2.7: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 340 packages from 501 contributors and audited 6879 packages in 66.358s
found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details
INFO  Start blogging with Hexo!
[root@lixx ~]# cd blog-demo/
[root@lixx blog-demo]# ls
_config.yml  node_modules  package.json  package-lock.json  scaffolds  source  themes

簡單介紹一下這些文件目錄的作用:

  • _config.yml : 全局配置文件,部署完后需要修改下這里面的配置。
  • package.json:數(shù)據(jù)庫保存在這個(gè)里面。
  • source: md格式的源文件都在這里面。
  • public: 這個(gè)文件夾還沒有生成,網(wǎng)頁都在這里面。
  • themes:博客的主題保存路徑,每個(gè)文件夾一個(gè)主題。

5.2 開啟博客進(jìn)行預(yù)覽

[root@lixx blog-demo]# hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

博客默認(rèn)啟動(dòng)在 4000 端口,打開瀏覽器訪問http://<server ip>:4000



注:如果無法訪問的話,請(qǐng)檢查防火墻配置。

5.3 更改博客主題

默認(rèn)使用的主題是landscape,在目錄themes/landscape下,更改一個(gè)個(gè)人喜歡的主題,如hexo-theme-yilia:

[root@lixx blog-demo]# git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
正克隆到 'themes/yilia'...
remote: Enumerating objects: 1, done.
remote: Counting objects: 100% (1/1), done.
remote: Total 2037 (delta 0), reused 0 (delta 0), pack-reused 2036
接收對(duì)象中: 100% (2037/2037), 10.52 MiB | 74.00 KiB/s, done.
處理 delta 中: 100% (1093/1093), done.
[root@lixx blog-demo]# ls themes/
landscape  yilia

主題庫:https://hexo.io/themes/

5.4 個(gè)人定制化

編輯 _config.yml

[root@lixx blog-demo]# grep -v ^# _config.yml 

title: title
subtitle: subtitle
description: a blog demo
keywords: key
author: lixx
language: zh-CN  # default en, select from `themes/landscape/languages/`
timezone: Asia/Shanghai

url: http://yoursite.com/blog-demo
root: /blog-demo
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: false
  tab_replace:
  
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
default_category: uncategorized
category_map:
tag_map:

date_format: YYYY-MM-DD
time_format: HH:mm:ss

per_page: 10
pagination_dir: page

theme: yilia

deploy:
  type:  

5.5 查看個(gè)人定制版頁面

圖片.png

6、發(fā)布個(gè)人博客到碼云上

配置使用hexo-deployer-git插件,用于將代碼推送到碼云

[root@lixx blog-demo]# npm install hexo-deployer-git --save
npm WARN babel-eslint@10.0.2 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ hexo-deployer-git@1.0.0
added 24 packages from 10 contributors and audited 9166 packages in 11.914s
found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

再次編輯 blog-demo 目錄下 _config.yml 文件,修改deploy 的值

deploy:
  type: git
  repository: https://gitee.com/lilingxing20/blog-demo.git
  branch: master

注:就是在碼云上創(chuàng)建的項(xiàng)目地址。

上傳到碼云

[root@lixx blog-demo]# hexo deploy
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
[master(根提交) f511830] Site updated: 2019-08-04 00:30:19
 41 files changed, 7414 insertions(+)
 create mode 100644 2019/08/03/hello-world/index.html
 create mode 100644 archives/2019/08/index.html
 create mode 100644 archives/2019/index.html
 create mode 100644 archives/index.html
 create mode 100644 css/fonts/FontAwesome.otf
 create mode 100644 css/fonts/fontawesome-webfont.eot
 create mode 100644 css/fonts/fontawesome-webfont.svg
 create mode 100644 css/fonts/fontawesome-webfont.ttf
 create mode 100644 css/fonts/fontawesome-webfont.woff
 create mode 100644 css/images/banner.jpg
 create mode 100644 css/style.css
 create mode 100644 fancybox/blank.gif
 create mode 100644 fancybox/fancybox_loading.gif
 create mode 100644 fancybox/fancybox_loading@2x.gif
 create mode 100644 fancybox/fancybox_overlay.png
 create mode 100644 fancybox/fancybox_sprite.png
 create mode 100644 fancybox/fancybox_sprite@2x.png
 create mode 100644 fancybox/helpers/fancybox_buttons.png
 create mode 100644 fancybox/helpers/jquery.fancybox-buttons.css
 create mode 100644 fancybox/helpers/jquery.fancybox-buttons.js
 create mode 100644 fancybox/helpers/jquery.fancybox-media.js
 create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.css
 create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.js
 create mode 100644 fancybox/jquery.fancybox.css
 create mode 100644 fancybox/jquery.fancybox.js
 create mode 100644 fancybox/jquery.fancybox.pack.js
 create mode 100644 fonts/default-skin.b257fa.svg
 create mode 100644 fonts/iconfont.16acc2.ttf
 create mode 100644 fonts/iconfont.45d7ee.svg
 create mode 100644 fonts/iconfont.8c627f.woff
 create mode 100644 fonts/iconfont.b322fa.eot
 create mode 100644 fonts/tooltip.4004ff.svg
 create mode 100644 img/default-skin.png
 create mode 100644 img/preloader.gif
 create mode 100644 img/scrollbar_arrow.png
 create mode 100644 index.html
 create mode 100644 js/script.js
 create mode 100644 main.0cf68a.css
 create mode 100644 main.0cf68a.js
 create mode 100644 mobile.992cbe.js
 create mode 100644 slider.e37972.js
Username for 'https://gitee.com': lilingxing20
Password for 'https://lilingxing20@gitee.com': 
Counting objects: 58, done.
Compressing objects: 100% (50/50), done.
Writing objects: 100% (58/58), 653.17 KiB | 0 bytes/s, done.
Total 58 (delta 5), reused 0 (delta 0)
remote: Powered By Gitee.com
To https://gitee.com/lilingxing20/blog-demo.git
 + f7cf72d...f511830 HEAD -> master (forced update)
分支 master 設(shè)置為跟蹤來自 https://gitee.com/lilingxing20/blog-demo.git 的遠(yuǎn)程分支 master。
INFO  Deploy done: git

博客發(fā)布


圖片.png

圖片.png

圖片.png

圖片.png

對(duì)比前面在本地環(huán)境的預(yù)覽,可以看到一個(gè)簡單的個(gè)人博客已經(jīng)成功發(fā)布在碼云上。

7、其他

hexo命令:

  • hexo clean ##清理
  • hexo g ##構(gòu)建、編譯
  • hexo s ##啟動(dòng)服務(wù)
  • hexo d ##上傳至服務(wù)器
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容