搭建gitee-hexo博客方法

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

成都创新互联公司是一家专注于成都网站建设、做网站与策划设计,隆回网站建设哪家好?成都创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:隆回等地区。隆回做网站价格咨询:18980820575

搭建gitee博客

环境要求

系统	软件
windows	git, node.js(推荐使用cnpm)

安装Nodejs

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

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

设置环境变量

搭建gitee-hexo博客方法

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

安装淘宝镜像

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

搭建gitee-hexo博客方法

安装hexo

$ ./cnpm install -g hexo

搭建gitee-hexo博客方法

初始化Hexo

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

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

搭建gitee-hexo博客方法

获取博客主题

$ 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主题.

区分配置文件

配置文件	路径
站点配置文件	/f/Document-PDF/web-blog/hexo/_config.yml
主题配置文件	/f/Document-PDF/web-blog/hexo/themes/next/_config.yml

我用的是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  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  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: 
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: 
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: 
  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

重新编译并运行该项目.
使用该网址,本地访问
部署博客到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目录下就可以编写博客了.
个人博客效果参考: 
常见问题

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 %}
这种方式，图片也可以同时出现在文章和主页以及归档页中.            
            
                        

            文章题目：搭建gitee-hexo博客方法            

            分享路径：http://6mz.cn/article/giesjd.html


    
        其他资讯
        
            
                    Javascript类型转换、封闭函数及常见内置对象操作示例
                

                    MySQL优化中index_merge有什么作用
                

                    使用vue怎么将后台数据时间戳转换成日期格式
                

                    python中send方法的实例
                

                    如何深入了解Redis中的Codis

网站建设知识

搭建gitee-hexo博客方法

搭建gitee博客

环境要求

安装Nodejs

设置环境变量

安装淘宝镜像

安装hexo

初始化Hexo

获取博客主题

区分配置文件

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

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

本地预览博客

部署博客到gitee上.

1. 创建gitee账号.

2.创建项目

3. 发布到gitee

4. gitee Pages设置

5. 设置URL并发布博客

更换主题

更改主题配置文件

更改站点配置文件

常见问题

支持pdf

支持图片

其他资讯

`本地预览博客`