搭建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/# Sitetitle: Jacky Lisubtitle:description:keywords:author: Jacky Lilanguage: 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/blogroot: /blogpermalink: :year/:month/:day/:title/permalink_defaults:# Directorysource_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriescode_dir: downloads/codei18n_dir: :langskip_render:# Writingnew_post_name: :title.md # File name of new postsdefault_layout: posttitlecase: false # Transform title into titlecaseexternal_link: true # Open external links in new tabfilename_case: 0render_drafts: falsepost_asset_folder: truerelative_link: falsefuture: truehighlight:  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 & Tagdefault_category: uncategorizedcategory_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-DDtime_format: HH:mm:ss# Paginationper_page: 10pagination_dir: page# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: next# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:  type: git  repo: https://gitee.com/JackyYuan/Blog.git  branch: mastersearch:  path: search.xml  field: post  format: html  limit: 10000

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

override: falsefavicon:  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.svgkeywords: "Hexo, NexT"rss:footer:  icon: user  copyright:  powered: false  theme:    enable: false    version: falsecanonical: trueseo: falseindex_with_subtitle: false# Menu Settingsmenu:  home: /  tags: /tags  categories: /categories  archives: /archives  about: /aboutmenu_icons:  enable: truescheme: Musesocial:  GitHub: https://github.com/firstoney  E-Mail: devops_yj@163.comsocial_icons:  enable: true  icons_only: false  transition: falselinks_icon: linklinks_title: Linkslinks_layout: blocktoc:  enable: true  number: true  wrap: falsesidebar:  position: left  display: post  offset: 12  b2t: false  scrollpercent: false  onmobile: false# Post Settingsscroll_to_more: truesave_scroll: falseexcerpt_description: trueauto_excerpt:  enable: false  length: 150post_meta:  item_text: true  created_at: true  updated_at: false  categories: true# Post wordcount display settings# Dependencies: https://github.com/willin/hexo-wordcountpost_wordcount:  item_text: true  wordcount: false  min2read: false  totalcount: false  separated_meta: truepost_copyright:  enable: false  license: CC BY-NC-SA 3.0  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/# Misc Theme Settingsmobile_layout_economy: falseandroid_chrome_color: "#222"custom_logo:  enabled: false  image:highlight_theme: night eightiesfont:  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,Facebookbusuanzi_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: 0motion:  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.ymldeploy:  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.ymlurl: https://yuyuancode.gitee.io/blogroot: /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.ymloverride: falsereminder: falsecache:  enable: trueminify: false  powered:    # Hexo link (Powered by Hexo).    enable: false    # Version info of Hexo after Hexo link (vX.X.X).    version: falsemenu:  home: /  tags: /tags  categories: /categories  archives: /archives  about: /aboutscheme: Muse  GitHub: https://github.com/firstoneysocial_icons:  enable: true  icons_only: false  transition: falselinks:  Title: https://blog.51cto.com/liyuanjietoc:  enable: true  position: leftpost_meta:  item_text: true  created_at: true  updated_at:    enable: true    another_day: true  categories: truesymbols_count_time:  separated_meta: true  item_text_post: true  item_text_total: true  awl: 4  wpm: 275wechat_subscriber:  enable: true  qcode: /uploads/wechat-qcode.jpg  description: 这是我的个人微信公众号,用微信扫一扫关注.  highlight_theme: night eightiesbookmark:  enable: truegithub_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.ymltitle: Jacky Lisubtitle:description:keywords:author: Jacky Lilanguage: zh-CNtimezone:url: https://jackyyuan.gitee.io/blogroot: /blogpermalink: :year/:month/:day/:title/permalink_defaults:source_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriescode_dir: downloads/codei18n_dir: :langskip_render:new_post_name: :title.md # File name of new postsdefault_layout: posttitlecase: false # Transform title into titlecaseexternal_link: true # Open external links in new tabfilename_case: 0render_drafts: falsepost_asset_folder: truerelative_link: falsefuture: truehighlight:  enable: true  line_number: true  auto_detect: false  tab_replace:index_generator:  path: ''  per_page: 10  order_by: -datedefault_category: uncategorizedcategory_map:tag_map:date_format: YYYY-MM-DDtime_format: HH:mm:ssper_page: 10pagination_dir: pagetheme: nextdeploy:  type: git  repo: https://gitee.com/JackyYuan/Blog.git  branch: mastersearch:  path: search.xml  field: post  format: html  limit: 10000

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

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

个人博客效果参考:

常见问题

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$ lsgit clone https://github.com/theme-next/theme-next-pdf source/lib/pdfnext主题配置文件: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 %}

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