搭建gitee-hexo博客方法-创新互联

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

创新互联公司主营绵阳网站建设的网络公司,主营网站建设方案,成都app软件开发,绵阳h5微信平台小程序开发搭建,绵阳网站营销推广欢迎绵阳等地区企业咨询

搭建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 %}

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

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

            

            标题名称：搭建gitee-hexo博客方法-创新互联            

            当前路径：http://cqcxhl.com/article/hdspg.html


    
        其他资讯
        
            
                    连路由器无法上网 连路由器无法上网怎么办
                

                    c语言中函数输出值 c语言函数输出值保留小数
                

                    c语言四个函数图像 c语言四个函数图像怎么表示
                

                    怎样查看阿里云服务器ip地址 阿里云服务器配置怎么看
                

                    c语言中系统计算器的函数 c语言实用计算器

重庆分公司，新征程启航

搭建gitee-hexo博客方法-创新互联

搭建gitee博客

环境要求

安装Nodejs

设置环境变量

安装淘宝镜像

安装hexo

初始化Hexo

获取博客主题

区分配置文件

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

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

本地预览博客

部署博客到gitee上.

1. 创建gitee账号.

2.创建项目

3. 发布到gitee

4. gitee Pages设置

5. 设置URL并发布博客

更换主题

更改主题配置文件

更改站点配置文件

常见问题

支持pdf

支持图片

其他资讯

`本地预览博客`

`部署博客到gitee上.`

`1. 创建gitee账号.`

`2.创建项目`

`3. 发布到gitee`

`4. gitee Pages设置`

`5. 设置URL并发布博客`

`更换主题`

`更改主题配置文件`

`更改站点配置文件`

`常见问题`

`支持pdf`

`支持图片`