成都创新互联网站制作重庆分公司

Hexo博客搭建方法是什么

这篇文章主要讲解了“Hexo博客搭建方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Hexo博客搭建方法是什么”吧！

创新互联建站主要从事网站制作、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务江永,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

本文默认已经安装好git和node.js环境

版本说明：git version 2.16.2.windows.1 、 node.js v8.9.4

Hexo是什么

Hexo 是一个快速、简洁且高效的博客框架，这里不多介绍，丢个链接，感兴趣的自己去看吧：Hexo中文官网，里面的东西比较多，不光有hexo使用文档，还有众多的hexo插件和主题。

我的Hexo博客主页效果图

欢迎来访~逸竹小站

Hexo博客搭建方法是什么

安装Hexo

$ npm install -g hexo-cli

建立默认主题博客

$ hexo init blog
$ cd blog
$ npm install

blog为博客存储文件夹名称，可随意命名，本文以blog为例。最好命名与GitHub Pages仓库名称一致，省的后面修改，不过都是小case

Hexo博客搭建方法是什么

此时打开localhost:4000即可看到默认主题的Hexo博客

选择主题

在官网-主题里面有200+的主题可供选择，我推荐几款个人比较喜欢的

  • 简约款

    • hexo-theme-next

    • maupassant-hexo

    • hexo-theme-melody

  • 炫酷款

    • black-blue

    • hexo-theme-nebula

  • 实用款

    • hexo-theme-pure

应用主题

选择好主题后，进入对应的github项目主页，一般都会有README文件帮助完成后续搭建，若无可以参考下面步骤进行，进入之前搭建好的博客主题文件目录下（本文为：blog/themes/），检出主题文件

$ git clone https://github.com/xxxx

然后修改博客配置文件_config.yml，添加下面这行

theme: xxx

注意：①xxx为主题名称

②不是主题的配置文件哦，在博客文件夹根目录下

配置文件详解

搭建整个博客过程中有两个配置文件，非常重要，一个是博客配置文件，一个是主题配置文件分别存放在各自的根目录下，文件名均为_config.yml

博客配置文件

# Hexo 配置

# Site
title: Hexo		# Hexo博客网站标题
subtitle:		# Hexo博客网站子标题
description:	# Hexo博客网站描述
keywords:		# Hexo博客关键词
author: John Doe	# 作者
language:			# 语言
timezone:			# 时区

# URL
url: http://yoursite.com	# 网站网址
root: /						# 网站根目录
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			# i18n国际化
skip_render:

# Writing
new_post_name: :title.md 	# 新博客文件名格式
default_layout: post		# 默认布局
titlecase: false 			# 是否标题小写
external_link: true 		# 是否在新的标签页打开链接
filename_case: 0			# 转换文件名1：小写，2：大写
render_drafts: false		# 显示草稿
post_asset_folder: false	# 
relative_link: false		# 是否是用相对路径作为连接
future: true				# 是否展示未来的文章
highlight:					# 代码高亮设置
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# Home page setting
index_generator:		# 主页设置
  path: ''				# 博客根目录
  per_page: 10			# 分页大小
  order_by: -date		# 排序，默认日期
  
# Category & Tag
default_category: uncategorized	# 默认分类
category_map:			# 分类集合
tag_map:				# 标签集合

# Date / Time format
date_format: YYYY-MM-DD	# 日期格式
time_format: HH:mm:ss	# 时间格式

# Pagination
per_page: 10			# 分页大小
pagination_dir: page	# 分页目录

# Extensions
theme: landscape		# 主题

# Deployment
deploy:					# 部署
  type:					# 类别：git

主题配置文件，这个是black-blue主题的配置文件，已经比较详细了，直接贴上来了

# >>> Basic Setup | 基础设置 <<<

# Header | 主菜单
## About Page: `hexo new page about`
## Tags Cloud Page: `hexo new page tags`
menu:
  # 主页: /archives/
  所有文章: /archives/
  玩转开发工具: /categories/开发工具/
  玩转数码: /categories/digital
  算法学习: /categories/algorithm
  关于我: /about/
# 静心阅读: /tags

# Link to your avatar | 填写头像地址
avatar: /img/avatar.png

# Small icon of Your site | 站点小图标地址
favicon: /img/favicon.png

# 域名是否启用https，如果启用，js文件必须https加载
isHttps: true

# Social info. Bar | 社交信息展示
## Keep "mailto:" in Email | 设置 Email 时保留 "mailto:"
## Encrypt email 加密邮件地址 http://ctrlq.org/encode/
## RSS requires a plugin to take effect | 使用 RSS 需先安装对应插件
## https://github.com/hexojs/hexo-generator-feed
subnav:
  github: xxxxx
  weibo: xxxxxxxx
  rss: /atom.xml

  # Google: "#"
# search_box: true

# >>> Conments 评论系统 <<<

disqus:
  on: false
  shortname: xxxxxxxxx
  # https://help.disqus.com/customer/en/portal/articles/466208-what-s-a-shortname-
  # It is unnecessary to enable disqus here if
  # you have set "disqus_shortname" in your site's "_config.yml"
changyan:
  on: true
  appid: xxxx
  conf: xxxxxxxxx
  # 是否开启畅言评论，
  # id 中填写你的友言用户数字ID，注册后进入后台管理即可查看
  # 畅言评论在 Web 环境下运行，普通本地环境无法查看，请部署后在线上测试。
gitment:
  on: true
  githubID: yourid
  repo: yourrepo
  client_id: yourid
  client_secret: yoursecret
  lazy: true

# >>> Style Customisation 样式自定义 <<<

# Background | 背景
## "background_sum": show images form /source/background/的图片数目
## "on: true": 自动随机显示这5张图片
## "on: false": 自定义显示图片设置background_image: 5
background:
  on: true
  background_sum: 1
  background_image: 1

highlight_style:
  on: true
  inline_code: 3  # Value: 0 - 9 可选
  code_block: 2  # Value: 0 - 4
  # Set inline_code to style highlight text
  # Chose a highlight theme for code block
  # 通过 inline_code 切换内置文本高亮样式
  # 通过 code_block 切换内置代码高亮配色主题

blockquote_style:
  #on: true
  blockquote: 5  # Value: 0 - 7 可选
  # 自定义文章「引用部分」的样式

# 左边栏宽度 px
left_col_width: 300

# 目录中标题不换行
# Keep TOC title on the same line |
toc_nowrap: false

# 自定义"阅读全文"链接按钮的显示文字
# Customize the text on excerpt link
excerpt_link: 查看更多 #修改more>>的文字

# 是否显示边栏中的搜索框（站内搜索）
# Search Box in left column
search_box: true

# 是否开启主页及加载头像时的动画效果
# Animation in Homepage and Loading avatar
animate: true

# >>> Small features | 小功能设置 <<<

# 是否开启边栏多标签切换
# Birdhouse button in left column
tagcloud: true

# Blogroll, Link exchange | 友情链接
# friends: false
friends:
  csdn: http://blog.csdn.net/baidu_21483933
  segmentfault: https://segmentfault.com/blog/maocg_web
  简书: http://www.jianshu.com/users/eb37ef89c746/latest_articles
#是否开启“关于我”。
aboutme: 爱动漫,爱游戏,爱编程,爱运动,爱的太多了!
#aboutme: false

# 是否在新窗口打开链接
open_in_new: false

# Customize feed link 自定义订阅地址
rss: /atom.xml

# >>> Vendors | 第三方工具 & 服务 <<<

# images viewer | 图片浏览器
## http://www.fancyapps.com/fancybox/
fancybox: true

# Display Math(LaTeX, MathML...) | 数学公式支持
## https://www.mathjax.org/
mathjax: false

# Socail Share | 是否开启分享
# share: true
baidushare: true
#showshare: true

# 百度、谷歌站长验证。填写 HTML 标签 content
# Site Verification for Google and Baidu. HTML label content.
# google_site: # pFW527fHrjfI0si2w4NQ0w3cTw12AvvuohAu1PUfqKA
# baidu_site: #c167b9feb4f0b208b712c79629c188e4

# Fill in Google Analytics tracking ID, #e.g. UA-XXXXX-X, or Baidu Analytics hash key
google_analytics: xxxxx
baidu_analytics: xxxxxx

# 不蒜子网站计数设置
# http://ibruce.info/2015/04/04/busuanzi/
visit_counter:
  on: true
  site_visit: 极客到访数
  page_visit: 本页阅读量

# A标签提示
TipTitle: true

# Loading
# Loading: true

日常产出博客

写作

新建文章
$ hexo new [layout] </pre><pre>您可以在命令中指定文章的布局（layout），默认为 `post`，可以通过修改 `_config.yml` 中的 `default_layout` 参数来指定默认布局。</pre><pre>$ hexo new photo "My Gallery"</pre><pre>在执行这行指令时，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章，所以可以新建几个博客模板文件放置在 scaffolds 文件夹下。</pre><p>我用的博客模板为：</p><pre>---
title: {{ title }}
categories: 分类
tags: 
  - 标签
date: {{ date }}
description: 描述
---

** {{ title }}：** <Excerpt in index | 首页摘要>

<!-- more -->
<The rest of contents | 余下全文></pre><h5>新建页面</h5><pre>$ hexo new [layout] <title></pre><h4>本地启动</h4><pre>$ hexo s[erver]
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.</pre><p>启动之后http://localhost:4000 即可看到效果</p><h4>本地调试</h4><pre>$ hexo s[erver] --debug</pre><p>进入调试模式，可以看到详细的启动日志，包含hexo版本、工作目录、插件、博客目录、静态文件等信息，同时访问调试博客时还可以看到各资源响应状态和时间等信息。这种模式下调试博客样式及特效非常方便。</p><h4>提交文件到github</h4><pre>$ git add .
$ git commit -m "提交备注"</pre><p>即可提交到本地仓库，不熟悉git命令的可以查看我的另一篇博文Git命令汇总</p><h4>GitHub Pages配置</h4><p><img src="/upload/otherpic63/783591.jpg" alt="Hexo博客搭建方法是什么"></p><blockquote><p>这里仓库名称有两种命名方式：</p><p>①github账户的 <code>用户名</code>+<code>github.io</code>，这种仓库访问地址为:<code>https://用户名.github.io/</code></p><p>②随意命名只要与你其他仓库名称不冲突即可，例如<code>hexo-blog</code>，则访问地址为：<code>https://github.com/</code>+<code>用户名</code>+<code>/hexo-blog/</code></p><p>大多数都会选择第一种格式创建仓库</p></blockquote><p><img src="/upload/otherpic63/783592.jpg" alt="Hexo博客搭建方法是什么"></p><blockquote><p>①GitHub Page仓库资源文件必须存放master分之</p><p>②下面可以配置自己的域名，配置之后会在仓库根目录生成<code>CNAME</code>文件，同时要将域名解析到仓库访问地址</p></blockquote><h4>连接本地仓库和远程仓库</h4><p><strong>将本地博客文件夹名称改为与仓库名称一致</strong>，然后将二者关联</p><pre>$ git remote git@github.com:用户名/仓库名.git</pre><h4>部署到Hexo远程仓库</h4><pre>$ hexo c[lean]
$ hexo g[enerate]
$ hexo d[eploy]</pre><blockquote><p>hexo命令支持简写，条件是只有一个匹配项，egs：当安装了<code>hexo-douban</code> 之后执行<code>hexo d</code>就需要区分<code>hexo deploy</code>和<code>hexo douban</code>这两个命令了，可以分别使用<code>hexo de</code>和<code>hexo do</code>来调用</p></blockquote><p>部署完成之后即可在上面设置的访问地址中看到效果了。</p><h3>Hexo插件推荐</h3><p>与主题一样，官方-插件也收录了200余种插件，这里推荐几款个人喜欢的</p><ul><li><p>hexo-cli：Hexo命令行基础插件</p></li><li><p>hexo-server：基础插件</p></li><li><p>hexo-deployer-git：git支持基础插件</p></li><li><p>hexo-douban：分享豆瓣读书、电影、游戏的豆瓣秀插件</p></li><li><p>hexo-admin：插件版博客后台管理系统</p></li><li><p>hexo-admin-ehc：hexo-admin增强版</p></li><li><p>hexo-auto-category：根据文件夹自动生成分类</p></li><li><p>hexo-auto-excerpt：自动摘录标签</p></li><li><p>hexo-generator-search：提供搜索支持</p></li><li><p>hexo-generator-sitemap：生成sitemap</p></li></ul><h3>豆瓣插件</h3><p>这款插件貌似对于我正在用的主题插件(black-blue)支持的不是很好，要修改很多东西，我直接弃用了，但是这款插件的还是不错的，所以推荐下。</p><h4>安装</h4><pre>$ npm install hexo-douban --save</pre><h4>配置</h4><pre>douban:
  user: myDoubanID
  builtin: false
  book:
    title: 'This is my book title'
    quote: 'This is my book quote'
  movie:
    title: 'This is my movie title'
    quote: 'This is my movie quote'
  game:
    title: 'This is my game title'
    quote: 'This is my game quote'
  timeout: 10000</pre><ul><li><p><strong>user</strong>: 你的豆瓣ID.打开豆瓣，登入账户，然后在右上角点击 "个人主页" ，这时候地址栏的URL大概是这样："https://www.douban.com/people/xxxxxx/" ，其中的"xxxxxx"就是你的个人ID了。</p></li><li><p><strong>builtin</strong>: 是否将生成页面的功能嵌入<code>hexo s</code>和<code>hexo g</code>中，默认是<code>false</code>,另一可选项为<code>true</code>(1.x.x版本新增配置项)。</p></li><li><p><strong>title</strong>: 该页面的标题.</p></li><li><p><strong>quote</strong>: 写在页面开头的一段话,支持html语法.</p></li><li><p><strong>timeout</strong>: 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。</p></li></ul><h4>使用</h4><pre>$ hexo douban
或
$ hexo douban -h
Usage: hexo douban

Description:
Generate pages from douban

Options:
  -b, --books   Generate douban books only
  -g, --games   Generate douban games only
  -m, --movies  Generate douban movies only</pre><h4>菜单</h4><p>如果上面的显示没有问题就可以在主题的配置文件 <code>_config.yml</code> 里添加如下配置来为这些页面添加菜单链接.</p><pre>menu:
  Home: /
  Archives: /archives
  Books: /books     #This is your books page
  Movies: /movies   #This is your movies page
  Games: /games   #This is your games page</pre><p>感谢各位的阅读，以上就是“Hexo博客搭建方法是什么”的内容了，经过本文的学习后，相信大家对Hexo博客搭建方法是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！</p>            
            
                        <br>
            网页标题：Hexo博客搭建方法是什么            <br>
            URL链接：<a href="http://cxhlcq.com/article/jgoeeg.html">http://cxhlcq.com/article/jgoeeg.html</a>
        </div>
    </div>
</div>
<div class="other container">
    <h3>其他资讯</h3>
    <ul>
        <li>
                <a href="/article/ggehsd.html">php调用swoole的方法</a>
            </li><li>
                <a href="/article/ggehsc.html">C#语言特性</a>
            </li><li>
                <a href="/article/ggehcg.html">Python为什么如此火</a>
            </li><li>
                <a href="/article/ggehos.html">centos7怎么避免遇到php配置文件不生效问题</a>
            </li><li>
                <a href="/article/ggehdi.html">Linux下MySQL主从复制的配置</a>
            </li>    </ul>
</div>
<div class="footer">
    <div class="foota container">
        <div class="foot_nav fl col-lg-8 col-md-8 col-sm-12 col-xs-12">
            <ul>
                <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
                    <h3>网站制作</h3>
                    <a href="http://www.kswsj.com/" target="_blank">成都网站制作</a><a href="http://chengdu.cdcxhl.com/" target="_blank">成都营销网站制作</a><a href="http://www.36103.cn/" target="_blank">成都网站制作</a><a href="http://seo.cdkjz.cn/wangzhan/" target="_blank">网站制作公司</a><a href="http://www.kswcd.com/mobile/" target="_blank">手机网站制作</a><a href="http://www.cdxwcx.cn/" target="_blank">成都网站制作</a>                </li>
                <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
                    <h3>企业服务</h3>
                    <a href="https://www.cdcxhl.com/mianfei/zuo/chengdu.html" target="_blank">免费做网站</a><a href="https://www.cdcxhl.com/weihu/chengdu.html" target="_blank">成都网站维护</a><a href="https://www.cdcxhl.com/shoulu/" target="_blank">免费收录网站</a><a href="https://www.cdcxhl.com/service/gongsizhuce.html" target="_blank">注册公司</a><a href="https://www.cdcxhl.com/ruanwen/yingxiao/" target="_blank">软文发稿</a><a href="https://www.cdcxhl.com/shoulu/" target="_blank">网站收录</a>                </li>
                <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
                    <h3>网站建设</h3>
                    <a href="https://www.cdcxhl.com/yingxiao.html" target="_blank">营销型网站建设</a><a href="http://www.cdxwcx.cn/" target="_blank">成都网站建设</a><a href="http://www.cdxtjz.cn/" target="_blank">成都网站建设</a><a href="http://www.cqcxhl.com/" target="_blank">企业网站建设</a><a href="http://www.lswzjz.com/" target="_blank">乐山网站建设</a><a href="https://www.cdxwcx.com/wangzhan/dingzhi.html" target="_blank">定制网站建设</a>                </li>
                <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
                    <h3>服务器托管</h3>
                    <a href="https://www.cdcxhl.com/idc/cqwld.html" target="_blank">重庆电信五里店机房托管</a><a href="https://www.cdcxhl.com/idc/leshan.html" target="_blank">乐山服务器托管</a><a href="https://www.cdcxhl.com/tuoguan/yidong/" target="_blank">移动服务器托管</a><a href="https://www.cdcxhl.com/idc/cqyd.html" target="_blank">重庆移动机房托管</a><a href="https://www.cdxwcx.com/jifang/meishan.html" target="_blank">眉山服务器托管</a><a href="https://www.cdcxhl.com/idc/gadx.html" target="_blank">贵安电信机房</a>                </li>
            </ul>
        </div>
        <div class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <p>全国免费咨询:</p>
            <b>400-028-6601</b>
            <p>业务咨询：028-86922220 / 13518219792</p>
            <p>节假值班：18980820575 / 13518219792</p>
            <p>联系地址：成都市太升南路288号锦天国际A幢1002号</p>
        </div>
    </div>
    <div class="footb">
        <div class="copy container">
            <div class="fl">Copyright © 成都创新互联科技有限公司重庆分公司  <a href="https://beian.miit.gov.cn/" target="_blank">渝ICP备2021005571号</a></div>
            <!--<div class="fr"><a href="https://www.cdxwcx.com/" target="_blank">成都网站建设</a>：<a href="https://www.cdcxhl.com/" target="_blank">创新互联</a></div>-->
        </div>
    </div>
    <div class="link">
        <div class="container">
            友情链接:：
            <a href="https://www.cdcxhl.com/" target="_blank">成都网站建设</a>
            <a href="https://www.cdcxhl.com/city/chongqing.html" target="_blank">重庆网站建设</a>
            <a href="">四川网站建设</a>
            <a href="">重庆建设网站</a>
            <a href="https://www.cdxwcx.com/jifang/xiyun.html" target="_blank">移动服务器托管</a>
            <a href="http://www.cdfuwuqi.com/" target="_blank">成都服务器托管</a>
            <a href="https://www.cdcxhl.cn/" target="_blank">云服务器</a>
            <a href="http://www.cdhuace.com/" target="_blank">广告设计制作</a>
            <a href="https://www.cdcxhl.com/sheji/chongqing.html" target="_blank">重庆网页设计</a>
            <a href="https://www.cdcxhl.com/zuo/chongqing.html" target="_blank">重庆做网站</a>
            <a href="https://www.cdcxhl.com/zhizuo/chongqing.html" target="_blank">重庆网站制作</a>
            <a href="">重庆网站建设</a>
            <a href="">重庆网站公司</a>
            <a href="">渝中网站制作</a>
            <a href="">重庆网站设计</a>
        </div>
    </div>
</div>
<div class="foot">
    <ul class="public-celan">
        <li>
            <a href="https://p.qiao.baidu.com/cps3/chatIndex?siteToken=6ce441ff9e2d6bedbdfc2a4138de449e&speedLogId=162260383240185e3_1622603832401_02407&eid=6256368&reqParam=%7B%22from%22%3A1%2C%22sessionid%22%3A%22-100%22%2C%22siteId%22%3A%2211284691%22%2C%22tid%22%3A%22-1%22%2C%22userId%22%3A%226256368%22%2C%22ttype%22%3A1%2C%22pageId%22%3A0%7D" target="_blank" class="a1 db tc">
                <img src="/Public/Home/img/icon-23.png" alt="" class="db auto">
                <span class="span-txt">在线咨询</span>
            </a>
        </li>
        <li>
            <a href="tel:18980820575" class="a1 db tc">
                <img src="/Public/Home/img/icon-24.png" alt="" class="db auto">
                <span class="span-txt">电话咨询</span>
            </a>
        </li>
        <li>
            <a target="_blank" href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="a1 db tc">
                <img src="/Public/Home/img/icon-25.png" alt="" class="db auto">
                <span class="span-txt">QQ咨询</span>
            </a>
        </li>
        <li>
            <a target="_blank" href="tencent://message/?uin=532337155&Site=&Menu=yes" class="a1 db tc public-yuyue-up">
                <img src="/Public/Home/img/icon-26.png" alt="" class="db auto">
                <span class="span-txt">预约顾问</span>
            </a>
        </li>
    </ul>
</div>
<div class="customer">
    <dl class="icon1">
        <dt>
            <a href="tencent://message/?uin=1683211881&Site=&Menu=yes">
                <i class="iconT"><img src="/Public/Home/img/QQ.png" alt=""></i>
                <p>在线咨询</p>
            </a>
        </dt>
    </dl>
    <dl class="icon2">
        <dt><i><img src="/Public/Home/img/weixin.png" alt=""></i><p>微信咨询</p></dt>
        <dd><img src="/Public/Home/img/ewm.png"></dd>
    </dl>
    <dl class="icon3">
        <dt><i><img src="/Public/Home/img/dianhua.png" alt=""></i><p>电话咨询</p></dt>
        <dd>
            <p>028-86922220（工作日）</p>
            <p>18980820575（7×24）</p>
        </dd>
    </dl>
    <dl class="icon4">
        <dt class="sShow">
            <a href="tencent://message/?uin=244261566&Site=&Menu=yes">
                <i><img src="/Public/Home/img/dengji.png" alt=""></i><p>提交需求</p>
            </a>
        </dt>
    </dl>
    <dl class="icon5">
        <dt class="gotop">
            <a href="#top">
                <i><img src="/Public/Home/img/top.png" alt=""></i><p>返回顶部</p>
            </a>
        </dt>
    </dl>
</div>
</body>
</html>
<script>
    $(".con img").each(function(){
        var src = $(this).attr("src");    //获取图片地址
        var str=new RegExp("http");
        var result=str.test(src);
        if(result==false){
            var url = "https://www.cdcxhl.com"+src;    //绝对路径
            $(this).attr("src",url);
        }
    });
    window.onload=function(){
        document.oncontextmenu=function(){
            return false;
        }
    }
</script>