搭建gitee-hexo博客方法

在windows上搭建gitee仓库+ hexo静态博客的方法

搭建gitee博客

环境要求

安装Nodejs

windows下载二进制包链接: https://nodejs.org/dist/v10.16.3/node-v10.16.3-win-x64.zip

手动解压到你想要存放的目录下. 这里我已经解压到G:\ITInstall\connectInstall\Nodejsinstall\nodejs这个目录下了.

设置环境变量

已经设置nodejs的环境变量完成.

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装hexo

$ ./cnpm install -g hexo

初始化Hexo

创建hexo文件夹, 在终端中切换到hexo目录,输入命令:

$ cd /f/Document-PDF/web-blog/hexo/
$ hexo init

• 初始化完成的目录结构:

获取博客主题

$ cd /f/Document-PDF/web-blog/hexo
$ git clone --branch v5.1.4 https://github.com/iissnan/hexo-theme-next themes/next

下载完成后,在/hexo/themes目录下,可以看到landscape和next两个文件夹. Hexo默认使用的是landscape主题.

区分配置文件

我用的是next这个主题.

对站点配置文件进行配置的内容如下

$ vim _config.yml
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Jacky Li
subtitle:
description:
keywords:
author: Jacky Li
language: zh-Hans   #nextv5.1.4是zh-Hans  
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://jackyyuan.gitee.io/blog
root: /blog
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
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: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://gitee.com/JackyYuan/Blog.git
  branch: master

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

对主题配置文件的内容进行配置的内容如下

override: false
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

keywords: "Hexo, NexT"
rss:

footer:
  icon: user
  copyright:
  powered: false
  theme:
    enable: false
    version: false

canonical: true
seo: false
index_with_subtitle: false

# Menu Settings
menu:
  home: /
  tags: /tags
  categories: /categories
  archives: /archives
  about: /about

menu_icons:
  enable: true

scheme: Muse
social:
  GitHub: https://github.com/firstoney
  E-Mail: devops_yj@163.com

social_icons:
  enable: true
  icons_only: false
  transition: false

links_icon: link
links_title: Links
links_layout: block

toc:
  enable: true
  number: true
  wrap: false

sidebar:
  position: left
  display: post
  offset: 12
  b2t: false
  scrollpercent: false
  onmobile: false

# Post Settings
scroll_to_more: true
save_scroll: false
excerpt_description: true

auto_excerpt:
  enable: false
  length: 150
post_meta:
  item_text: true
  created_at: true
  updated_at: false
  categories: true

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: false
  min2read: false
  totalcount: false
  separated_meta: true

post_copyright:
  enable: false
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

# Misc Theme Settings
mobile_layout_economy: false
android_chrome_color: "#222"

custom_logo:
  enabled: false
  image:
highlight_theme: night eighties

font:
  enable: true
  host:

  # Global font settings used on <body> element.
  global:
    external: true
    family: Monda
    size: 16

  # Font settings for Headlines (h2, h3, h4, h5, h6, h7).
  # Fallback to `global` font settings.
  headings:
    external: true
    family: Roboto Slab
    size:

  # Font settings for posts.
  # Fallback to `global` font settings.
  posts:
    external: true
    family:

  # Font settings for Logo.
  # Fallback to `global` font settings.
  logo:
    external: true
    family:
    size:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family:
    size:

needmoreshare2:
  enable: false
  postbottom:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

busuanzi_count:
  # count values only if the other configs are false
  enable: false
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:

local_search:
  enable: true
  trigger: auto
  top_n_per_article: 1

# Tabs tag.
tabs:
  enable: true
  transition:
    tabs: false
    labels: true
  border_radius: 0

motion:
  enable: true

保存后执行:hexo clean && hexo g && hexo s即可.

本地预览博客

编译项目，输入命令：hexo g
运行项目，输入命令：hexo s

运行时报错:
    wordcount is not defined
运行下列该命令:
$ cnpm  install hexo-wordcount@2 --save

重新编译并运行该项目.

使用该网址,本地访问<http://localhost:4000/>

部署博客到gitee上.

1. 创建gitee账号.

2.创建项目

注意: 下图中的仓库名称JackyLi-Blog改为Blog了.

创建完成后,在项目中复制项目地址. 将地址粘贴在站点配置文件下:

$ vim _config.yml
deploy:
  type: git
  repo: https://gitee.com/JackyYuan/Blog.git
  branch: master

3. 发布到gitee

输入命令cnpm install hexo-deployer-git --save 安装自动部署发布工具
输入命令hexo clean && hexo g && hexo d 发布博客。

4. gitee Pages设置

在项目的服务中选择Pages选项,部署pages需要绑定手机号码. 点击启动.

新界面:

5. 设置URL并发布博客

$ vim _config.yml
url: https://yuyuancode.gitee.io/blog
root: /blog

我自己重新更改了个人空间地址. 将yuyuancode改为jackyyuan即可.

更换主题

$ cd /f/Document-PDF/web-blog/hexo/themes
$ mv next  next-v5.1.4
$ cd ../
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

更改主题配置文件

$ vim themes/next/_config.yml
override: false
reminder: false
cache:
  enable: true
minify: false

  powered:
    # Hexo link (Powered by Hexo).
    enable: false
    # Version info of Hexo after Hexo link (vX.X.X).
    version: false

menu:
  home: /
  tags: /tags
  categories: /categories
  archives: /archives
  about: /about

scheme: Muse
  GitHub: https://github.com/firstoney
social_icons:
  enable: true
  icons_only: false
  transition: false

links:
  Title: https://blog.51cto.com/liyuanjie

toc:
  enable: true

  position: left

post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: true
    another_day: true
  categories: true

symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true
  awl: 4
  wpm: 275

wechat_subscriber:
  enable: true
  qcode: /uploads/wechat-qcode.jpg
  description: 这是我的个人微信公众号,用微信扫一扫关注.

  highlight_theme: night eighties
bookmark:
  enable: true

github_banner:
  enable: true
  permalink: https://github.com/firstoney
  title: Follow me on GitHub

  global:
    external: true
    family: Lato
    size:

local_search:
  enable: true

更改站点配置文件

# next6.0是zh-CN
$ vim _config.yml
title: Jacky Li
subtitle:
description:
keywords:
author: Jacky Li
language: zh-CN
timezone:

url: https://jackyyuan.gitee.io/blog
root: /blog
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: true
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: next

deploy:
  type: git
  repo: https://gitee.com/JackyYuan/Blog.git
  branch: master

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

再执行命令hexo clean && hexo g && hexo d即可发布博客成功了.

在/web-blog/hexo/source/_posts目录下就可以编写博客了.

个人博客效果参考: <https://jackyyuan.gitee.io/blog/>

常见问题

1. hexo新建的文章插入图片,如何在网站显示?

   设置站点配置_config.yml:将post_asset_folder: false改为post_asset_folder: true
   安装插件:npm install https://github.com/CodeFalling/hexo-asset-image -- save
   运行hexo n "XXXXXX",生成XXXXX.md文章时就会在/source/_posts目录下生成XXXXXX的文件夹，将你想在XXXXX文章中插入的照片放置到这个同名文件夹中即可，图片的命名随意。
   添加图片:在想添加的位置写入{% asset_img xxx.jpg xxx %}

支持pdf

$ cd themes/next
$ ls
git clone https://github.com/theme-next/theme-next-pdf source/lib/pdf

next主题配置文件:
pdf:
  enable: true
  # Default height
  height: 500px
  pdfobject: //cdn.jsdelivr.net/npm/pdfobject@2.1.1/pdfobject.min.js

为了在文章中嵌入PDF文件，需要创建一个带有本地PDF文件URL的`pdf`标签
引用pdf的方法:
{% pdf /path/to/your/file.pdf %}

支持图片

• 在博客文章中支持图片

  相对路径引用的标签插件:
  {% asset_path slug %}
  {% asset_img slug [title] %}
  {% asset_link slug [title] %}

  参考支持图片的文档

• 在本地md插入图片时引用图片的方式是:

  {% asset_img example.jpg This is an example image %}

• 这种方式，图片也可以同时出现在文章和主页以及归档页中.