hexo框架-next主题-github搭建个人博客

时间：2023-03-08 22:53:27
hexo框架-next主题-github搭建个人博客

IT`huhui 的前言录

  • 我在GITHUB的个人站点：http://ithuhui.cn

  • 这里遇到的很多问题都是亲身解决后写的.还有遇到不懂可以邮件M我

  • 在这里要感谢浮生志的博客教程,很多我一开始不- 懂的都是借助了他的教程,附带他的主页www.ezlippi.com

  • 还有一个最重要的事情.这是记录我的学习,人生,IT之路的记录之地.如果大家有任何经验可以指导我或者我的学习记录过程和分享中能帮助到你，欢迎大家在博文下面进行评论或者邮箱联系我，我的邮箱是：hu545548724@163.com

  • 原创博文,大家转载的意欲,请附带上以下信息:
    来自：IT`huhui的个人博客
    作者：胡伟汇
    链接：http://www.cnblogs.com/ithuhui/p/5922273.html/ 原文链接

正文

注意事项~!

  • 站点的配置文件 **_config.yml** .主题里面也有个配置文件 **_config.yml** .

  • 配置文件必须不能直接使用记事本来进行编辑,否则假如输入了中文会出现中文乱码,导致配置文件错误.在这里我使用了EditPlus进行编辑并转码为UTF-8来解决这个问题

  • 该过程展示的是用git windows版本的,没有安装github windows版本.但是流程都是基本一样.

  • 这里说到的一些注意事项是个人亲身经历,但不代表全部人都会遇到或者有用,请理性观看

  • 转载请注明原地址，胡伟汇的个人博客主页:
    http://ithuhui.github.io

理清搭建所需的全部东西

基于github 我们需要：

git 或者 github (在这里我展示在windows平台)

基于hexo 我们需要：

(在这里介绍一下hexo博客搭建框架：Hexo 是高效的静态站点生成框架，她基于 Node.js。
通过 Hexo 你可以轻松地使用 Markdown 编写文章，除了 Markdown 本身的语法之外，
还可以使用 Hexo 提供的 标签插件 来快速的插入特定形式的内容。)

  • hexo 的框架
  • node.js
  • next主题包或者在线安装

安装本地所需

安装node.js，提供官网下载

官网首页就提供稳定版本和最新版本，看大家喜好。

安装git或者github的windows版本

Git Windows版官方下载

GITHUB的配置

注册github的账号

建立repository(仓库)

这里十分注意的是github 提供的免费个人网站需要有规定的仓库命名,仓库命名为[xxx.github.io],为了避免大家疑惑,说明一下,以前是[xxx.github.com]
后来出现了漏洞现在都是必须改为[xxx.github.io],xxx为你的用户名,必须是你的用户名.

SSH密钥匹配

推荐大家看这个,写的简洁明了.我复制过来就没意思了.
Github简明教程
但是就搭建博客而言.大家配置好 SSH KEY就好了.
检出仓库往后的都可以后面再研究.

安装hexo博客框架

本地新建文件夹如:D:\GitSource\blog用于存储你的配置文件等

在本地文件夹路径下git bash here 或者可以自己cd进去。

hexo框架-next主题-github搭建个人博客

安装hexo

npm install -g hexo
npm install hexo --save

初始化hexo

hexo init

安装Hexo 插件：自动生成sitemap,Rss，部署到git等

npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save

生成静态页面的文件

hexo generate(或者hexo g)

启动hexo服务(一般用于测试效果)

hexo server

第一次验证

启动了hexo服务后，在浏览器地址栏输入http://127.0.0.1:4000/ 或者 http://localhost:4000/ 可以看到初始模板的页面

打开 站点的配置文件_config.yml 进行修改

(切记别直接用记事本打开来进行编辑修改.注意事项请看文章开头)
复制你仓库的地址然后编辑修改_config.yml文件.
hexo框架-next主题-github搭建个人博客
假如你使用的是github windows版本,大概type要改成github.

deploy:
  repository: https://github.com/ithuhui/ithuhui.github.io.git
  type: git
  branch: master

然后分别执行命令,把文件上传到了Github

npm install hexo-deployer-git --save(如果前面插件都安装好这步可以免除)
hexo deployer(或者hexo d)

第二次验证

浏览器输入你的网址 https://ithuhui.github.io 查看初步成果
这里ithuhui改为你自己的用户名

NEXT主题下载并应用

方法一(推荐)：克隆最新版本
git bash 输入

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

方法二：下载稳定版本

解压所下载的压缩包至站点的 themes目录下,并将解压后的文件夹名称（hexo-theme-next-0.4.0）更改为 next。
然后修改 站点配置文件_config 的主题(theme)为next:

# Extensions
theme: next

下面提供：
NEXT主题官方发布页面https://github.com/iissnan/hexo-theme-next/releases，可以下载最新的next主题压缩包

部署全部完成后

日常使用命令

全部部署号以后,大家只需要记住这几个命令
新建博文,新建完之后再source/_posts/里面用markdown语法进行编辑你的博文

hexo new "博文的标题"

生成文件然后提交

hexo generate(或者hexo g)
hexo deployer(或者hexo d)

各个功能的添加

分类,标签页面的添加

  • 修改站点配置文件(直接去掉注释就OK)

    menu:
  tags: /tags

  • 新增页面

    hexo new page tags

  • 修改新增的标签的index页面 路径在 /source/tags/index.md

    ---
title: tags
date: 2016-09-21 11:48:58
type: "tags"
comments: false
---

    标签页面同理,大家修改把tags 换成categories就OK了.

增加第三方服务

百度统计

  • 登录百度统计,打开代码获取,查看ID.打开主题配置文件_config.yml修改
    hexo框架-next主题-github搭建个人博客

    # Baidu Analytics ID
baidu_analytics: 你的百度统计脚本ID

    多说评论

  • 打开主题配置文件_config.yml修改.
    hexo框架-next主题-github搭建个人博客
    新增或者直接把注释去掉duoshuo_shortname字段

    # Duoshuo ShortName
duoshuo_shortname:  你注册时候的值

    访问量,访客量统计显示

  • 修改主题配置文件. 把enable的值改为true; 然后根据需求把UV,PV打开.这里演示就是UV访客数统计

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user">本站访客数</i>
  site_uv_footer: 人次

友情连接

  • 修改主题配置文件 新增字段
# title
links_title: 友情连接
links:
  胡伟汇个人博客: http://ithuhui.github.io/

最后提供NEXT官方文档

文档里面写的很详细.可能有些地方有些许的错误.但是总体都是十分全面的
[ NEXT主题官方文档连接 ]http://theme-next.iissnan.com/getting-started.html

相关文章