咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

网站营销

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

大橙子网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

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://dzwzjz.com/article/jgoeeg.html">http://dzwzjz.com/article/jgoeeg.html</a>
            </div>
        </div>
        <div class="othernews">
            <h3>其他资讯</h3>
            <div class="othernews_list">
                <ul>
                    <li>
                            <a href="/article/dsjhcie.html">路由器wan灯不亮是什么原因 路由器wan指示灯不亮是什么原因</a>
                        </li><li>
                            <a href="/article/dsjhcii.html">微博注册java代码 java模拟新浪微博用户注册</a>
                        </li><li>
                            <a href="/article/dsjhcih.html">php循环套一直重复数据 php循环函数</a>
                        </li><li>
                            <a href="/article/dsjhcgo.html">go语言实战课程 go语言实战pdf下载</a>
                        </li><li>
                            <a href="/article/dsjhcgg.html">云端服务器安不安全了 云端服务器的作用</a>
                        </li>                </ul>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="footer_content">
        <div class="footer_content_top clear">
            <div class="content_top_share fl">
                <div><img src="/Public/Home/img/logo.png"></div>
                <div class="top_share_content">
                    <dd>分享至：</dd>
                    <dt class="bdsharebuttonbox clear" id="share">
                        <a href="#" class="bds_tsina iconfont fl" data-cmd="tsina" title="分享到新浪微博"></a>
                        <a href="#" class="bds_sqq iconfont fl" data-cmd="sqq" title="分享到QQ好友"></a>
                        <a href="#" class="bds_weixin iconfont fl" data-cmd="weixin" title="分享到微信"></a>
                        <a href="#" class="bds_weixin iconfont fl" data-cmd="tieba" title="分享到贴吧"></a>
                    </dt>
                    <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
                </div>
            </div>
            <div class="content_top_left fl clear">
                <div class="top_left_list fl">
                    <dd><a href="/about/">关于我们</a></dd>
                    <dt>
                        <a href="/about/#gsjj">公司简介</a>
                        <a href="/about/#fzlc">发展历程</a>
                    </dt>
                </div>
                <div class="top_left_list fl">
                    <dd><a href="/service/">服务项目</a></dd>
                    <dt>
                        <a href="/service/">高端网站建设</a>
                        <a href="/miniprogram/">小程序开发</a>
                        <a href="/service/app.html">APP开发</a>
                        <a href="/service/yingxiao.html">网络营销</a>
                    </dt>
                </div>
                <div class="top_left_list fl">
                    <dd><a href="/jianzhan/">建站知识</a></dd>
                    <dt>
                        <a href="/jianzhan/">行业新闻</a>
                        <a href="/jianzhan/">建站学堂</a>
                        <a href="/jianzhan/">常见问题</a>
                    </dt>
                </div>
                <div class="top_left_list fl">
                    <dd><a href="/contact/">联系我们</a></dd>
                    <dt>
                        <a href="/contact/#lxwm">公司地址</a>
                        <a href="/contact/#rczp">人才招聘</a>
                    </dt>
                </div>
            </div>
            <div class="content_top_right addressR fr">
                <div class="top_right_title addressf_title">
                    <a href="javascript:;" class="on">成都</a>
                    <a href="javascript:;">达州</a>
                </div>
                <div class="top_right_content addressf">
                    <div class="right_content_li on">
                        <div class="right_content_list clear">
                            <dd class="fl iconfont"></dd>
                            <dt class="fl">电话：028-86922220</dt>
                        </div>
                        <div class="right_content_list clear">
                            <dd class="fl iconfont"></dd>
                            <dt class="fl">地址：成都市太升南路288号锦天国际A幢1002号</dt>
                        </div>
                    </div>
                    <div class="right_content_li">
                        <div class="right_content_list clear">
                            <dd class="fl iconfont"></dd>
                            <dt class="fl">电话：028-86922220</dt>
                        </div>
                        <div class="right_content_list clear">
                            <dd class="fl iconfont"></dd>
                            <dt class="fl">地址：达州市南岸区弹子石腾龙大道58号2栋21-6</dt>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="link">
            友情链接：
            <a href="http://seo.cdkjz.cn/mobile/" title="成都网站推广公司" target="_blank">成都网站推广公司</a>   <a href="http://m.cdxwcx.com/weixin.html" title="成都微信开发" target="_blank">成都微信开发</a>   <a href="http://www.ruijiemsc.com/" title="瑞杰管理" target="_blank">瑞杰管理</a>   <a href="https://www.cdcxhl.com/" title="网站建设公司" target="_blank">网站建设公司</a>   <a href="https://www.cdxwcx.com/jifang/guanghua.html" title="光华机房服务器托管" target="_blank">光华机房服务器托管</a>   <a href="http://www.njxishu.com/" title="鳄鱼养殖" target="_blank">鳄鱼养殖</a>   <a href="https://www.cdxwcx.com/wangzhan/gaiban.html" title="网页改版" target="_blank">网页改版</a>   <a href="https://www.cdcxhl.com/idc/cqhx.html" title="重庆电信回兴机房" target="_blank">重庆电信回兴机房</a>   <a href="http://www.zsjierui.cn/" title="资阳网站建设" target="_blank">资阳网站建设</a>   <a href="http://www.cdxwcx.cn/tuoguan/deyang.html" title="德阳电信服务器托管" target="_blank">德阳电信服务器托管</a>           </div>
    </div>
    <div class="footer_content_copyright clear">版权所有：青羊区大橙子信息咨询工作室
        <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">蜀ICP备2022028542号-14</a>
    </div>
</div>

<!--浮窗-->
<div class="FloatingWindow clear">
    <a href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="FloatingWindow_list fr">
        <div class="FloatingWindow_list_title">
            <dd class="iconfont"></dd>
            <dt><span>在线</span>咨询</dt>
        </div>
    </a>
    <a href="javascript:;" class="FloatingWindow_list fr">
        <div class="FloatingWindow_list_title">
            <dd class="iconfont"></dd>
            <dt>服务热线</dt>
        </div>
        <div class="FloatingWindow_list_down fadeInRight animated">服务热线：028-86922220</div>
    </a>
    <a href="javascript:;" class="FloatingWindow_list fr STop">
        <div class="FloatingWindow_list_title">
            <dd class="iconfont"></dd>
            <dt>TOP</dt>
        </div>
    </a>
</div>

<script src="/Public/Home/js/jquery-1.8.3.min.js"></script>
<script src="/Public/Home/js/comm.js"></script>
<script src="/Public/Home/js/wow.js"></script>
<script src="/Public/Home/js/common.js"></script>
</body>
</html>
<script>
    $(".cont 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>