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
$ npm install -g hexo-cli
建立默认主题博客
$ hexo init blog $ cd blog $ npm install
blog为博客存储文件夹名称，可随意命名，本文以blog为例。最好命名与GitHub Pages仓库名称一致，省的后面修改，不过都是小case
此时打开
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> 地址分享：<a href="http://scjbc.cn/article/jgoeeg.html">http://scjbc.cn/article/jgoeeg.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dosdggj.html">c语言输入输出函数意思 c语言输入输出函数意思是什么</a> </li><li> <a href="/article/dosdgcg.html">php返回查询条数据 php获取数据库的某条信息</a> </li><li> <a href="/article/dosdges.html">php数据库迁移 网站数据库迁移</a> </li><li> <a href="/article/dosdgee.html">java长方体代码 java编程创建一个长方体类</a> </li><li> <a href="/article/dosdgjc.html">玫瑰java源代码 java玫瑰花代码</a> </li> </ul> </div> </div> <div class="footer"> <div class="contain"> <div class="foot-nav clearfix"> <ul class="footer-menu"> <li class="dropdown" ><a class="dropdown-toggle">服务范围<b class="caret"></b></a> <ul class="child-menu"> <li><a href="/website.html">网站建设</a></li> <li><a href="/weixin/" rel="nofollow">微信开发</a></li> <li><a href="/app/" rel="nofollow">APP开发</a></li> <li><a href="/design/" rel="nofollow">品牌设计</a></li> <li><a href="/market/" rel="nofollow">营销推广</a></li> </ul> </li> <li class="dropdown"><a href="/webcase/" class="dropdown-toggle" title=成都做网站案例>成都做网站案例<b class="caret"></b></a> <ul class="child-menu"> <li><a href="/webcase/jtssgslist.html" id="ctl00_show_85" title="集团上市公司">集团上市公司</a></li> <li><a href="/webcase/ppwzlist.html" id="ctl01_show_81" title="品牌网站">品牌网站</a></li> <li><a href="/webcase/xiangyingshilist.html" id="ctl02_show_82" title="响应式网站">响应式网站</a></li> <li><a href="/Marketingwebsite/index.html" id="ctl03_show_83" title="营销型网站">营销型网站</a></li> <li><a href="/waimaowangzhan/index.html" id="ctl04_show_84" title="外贸网站">外贸网站</a></li> </ul> </li> <li class="dropdown"><a href="/news/" class="dropdown-toggle">新闻中心 <b class="caret"></b></a> <ul class="child-menu"> <li><a href="/news/2.html" id="ctl00_show_70" title="网站建设">网站建设</a></li><li><a href="/news/3.html" id="ctl00_show_70" title="网站设计">网站设计</a></li><li><a href="/news/5.html" id="ctl00_show_70" title="网站制作">网站制作</a></li><li><a href="/news/6.html" id="ctl00_show_70" title="网站优化">网站优化</a></li> </ul> </li> <li class="dropdown"><a href="/Knowledge/" class="dropdown-toggle">知识学堂 <b class="caret"></b></a> <ul class="child-menu"> <li><a href="/websitelist/8.html" title="网站建设知识">网站建设知识</a></li><li><a href="/websitelist/9.html" title="网站设计知识">网站设计知识</a></li><li><a href="/websitelist/10.html" title="微信营销知识">微信营销知识</a></li><li><a href="/websitelist/11.html" title="营销推广知识">营销推广知识</a></li> </ul> </li> <li class="dropdown"><a href="/about/" class="dropdown-toggle" rel="nofollow">关于我们 <b class="caret"></b></a> <ul class="child-menu"> <li><a href="/about/jj/index.html" id="ctl00_show_1300" title="公司简介" rel="nofollow">公司简介</a></li> <li><a href="/about/history/index.html" id="ctl01_show_1301" title="发展历史" rel="nofollow">发展历史</a></li> <li><a href="/about/jjtd/index.html" id="ctl02_show_1302" title="精英团队" rel="nofollow">精英团队</a></li> <li><a href="/about/join/" rel="nofollow">加入我们</a></li> <li><a href="/about/contact/" rel="nofollow">联系小谭</a></li> </ul> </li> </ul> <dl class="last-dl"> <dt> <a href="javascript:;" title="联系我们" rel="nofollow">联系小谭</a> </dt> <dd class="conta"> <span><img src="/Public/Home/images/zg_ewm.png" width="100" /><br /> 企业微信号</span> </dd> </dl> </div> <div class="childcompan clearfix"> </div> <div class="copy"> 友情链接： <a href="https://www.cdcxhl.com/tuoguan/ershu/" title="成都二枢机房" target="_blank">成都二枢机房</a> <a href="http://www.wjwzjz.com/" title="温江网站设计" target="_blank">温江网站设计</a> <a href="http://www.tfchn.cn/" title="传美奇电气" target="_blank">传美奇电气</a> <a href="http://m.cdcxhl.com/" title="成都网站设计" target="_blank">成都网站设计</a> <a href="http://www.gyjierui.cn/" title="雷运建站" target="_blank">雷运建站</a> <a href="https://www.xwcx.net/" title="成都机柜租用" target="_blank">成都机柜租用</a> <a href="https://www.cdcxhl.com/tuoguan/zongshu/" title="成都棕树机房" target="_blank">成都棕树机房</a> <a href="http://www.cdhuace.com/faguangzi/wbfgz.html" title="无边发光字制作" target="_blank">无边发光字制作</a> <a href="http://www.cdhuace.com/zhuangxiu.html" title="成都工装公司" target="_blank">成都工装公司</a> <a href="http://www.stwzsj.com/" title="成都帛金建站" target="_blank">成都帛金建站</a> </div> <br> 123ABC<strong> <a href="/">成都网站建设</a></strong>，成都定制网站建设——全心全意建网站公司 </div> </div> <script type="text/javascript" src="/Public/Home/js/meiqia.js"></script> <script type="text/javascript" src="/Public/Home/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/Public/Home/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/Public/Home/js/i.js"></script> <script type="text/javascript" src="/Public/Home/js/script.js"></script> <script type="text/javascript" src="/Public/Home/js/SuperSlide.js"></script> <script type="text/javascript" src="/Public/Home/js/jquery.toTop.min.js"></script> <script type="text/javascript" src="/Public/Home/js/num-change.js"></script> <script type="text/javascript" src="/Public/Home/js/jquery.nicescroll.min.js"></script> <script type="text/javascript"> $(".menu li").eq(7).addClass("current-menu-item"); </script> </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>