从 2017 年到现在, 总共有两次用 Hexo 来搭建个人博客.
访问方子龙的博客 http://www.raysonblog.cn/ : http://www.raysonblog.cn/
第一次:
在 2017 年的时候, 开始想着用 Java 干它一个属于自己的博客, 当然不是马上就开始干, 得网上查找资料啊! 看看是否有现成的能够直接使用. 在此过程中, 发现有很多的博客主题都基本上一致, 而且还比较好看, 效果杠杠地. 为了满足好奇心, 就看到网站下方有关于 Hexo 的字样, 就点进去看到了一下简介, 而且还有很多好看的主题, 还可以随意配置自己喜欢的主题. 顿时我就打消了要自己写博客程序的念头. 有这么好用的, 当然是直接拿来即用. 就这样, 一边搭建一边学习也就有了 Hexo+Next 主题的第一版博客.
遗憾的是, 搭建成功以后, 也没有去管理, 任它荒废.
第二次:
搭建过程耗时一个月左右的时间, 抽空闲时间来做, 相比第一次, 这次的搭建过程耗时比较长, 主要原因是修改主题样式, 对主题代码不熟悉. 但是总体收获还是很多. 效果样式都还比较喜欢, 蛮符合我心里的预期.
接下来, 就谈谈如何搭建, 以及一些思考. 具体详细如何搭建也可以百度.
一. 环境配置
[Node.JS] 官网下载: https://nodejs.org/zh-cn/
[Git] 官网下载: https://git-scm.com/
网上有很多相关的安装使用教程, 我这里就不多余的说. 自己动手才是硬道理.
二. Hexo 的安装与常用基本命令
基础环境配置好以后, 那么接下来就可以安装生成静态博客网站的关键 --Hexo, 其主要信息和安装命令, 主题等都可以通过官网轻松的了解: https://hexo.io/zh-cn/
为了安装 Hexo, 只需要在 blog-hexo 目录中单击右键启动 Git Bash Here, 然后输入命令:
NPM install hexo-cli -g
网上有很多其他的命令, 建议一切以官网命令为依据, 由于时间版本原因, 很有可能未来的命令发生改变而失效.
然后等待几分钟 (取决于你的网速), 完成后.
在 blog-Hexo 目录下执行如下命令进行初始化:
hexo init
然后就可以使用 Hexo 三连击, 即我们最常用的三个主要命令 (依旧在上述 Git Bash 命令端口中):
- hexo clean # 清空已有 hexo 网站文件
- hexo generate(or g) # 依据网页文本与新的 CSS 样式生成新网站文件
- hexo server(or s) # 启动本地服务器
可以在 localhost:4000 查看网站修改效果 依次运行上述三个命令, 就可以在浏览器打开 localhost:4000 端口, 查看对应网站界面效果.
一般默认的是一个 landscape 主题, 后期当提交新文章或者新的样式修改时, 往往都是先从本地查看结果无误后再部署到 GitHub Pages.
Hexo deploy(or d) #提交代码到 GitHub 上
三. Hexo 主题下载与使用
主题官网浏览地址: https://hexo.io/themes/
在选择主题的过程中耗费了很多的时间和遇到了很多问题, 其原因就是主题功能不全以及选择自己喜欢的风格导致的. 最后推荐搭建使用 hexo-theme-next 主题, 因为这个功能最全.
在这个过程中, 主题的许多是要修改的.
菜单
版权
GitHub banner
社交信息
头像信息
阅读时间统计
打赏设置
评论设置
百度统计
leancloud 访问统计
不蒜子阅读访问统计
本地搜索
SEO 优化 (必须要做, 然后百度就搜不到你的博客)
四. 两个重要的配置文件: Hexo 的配置文件与主题的配置文件
4.1 Hexo 配置文件
- # Hexo Configuration
- ## Docs: https://hexo.io/docs/configuration.html
- ## Source: https://github.com/hexojs/hexo/
- # Site 站点
title: 方子龙
subtitle:
description: 「方子龙」一天不码字就剁手的程序猿. 专注 Java,Golang,Spring Boot/Spring Cloud 等技术交流分享.
keywords: 方子龙, SpringBoot,SpringCloud,Java 技术干货, 程序猿, Golang
author: 方子龙
- language:
- timezone:
- # URL
- ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
- url: http://www.raysonblog.cn
- root: /
- permalink: :year/:month/:day/:title/
- permalink_defaults:
- # Directory
- source_dir: source
- public_dir: public
- tag_dir: tags
- archive_dir: archives
- category_dir: categories
- book_dir: books
- code_dir: downloads/code
- i18n_dir: :lang
- skip_render:
- # Writing
- new_post_name: :title.md # File name of new posts
- default_layout: post
- titlecase: false # Transform title into titlecase
- external_link: true # Open external links in new tab
- filename_case: 0
- 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
- # 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 & Tag
- default_category: uncategorized
- category_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-DD
- time_format: HH:mm:ss
- # Pagination
- ## Set per_page to 0 to disable pagination
- per_page: 10
- pagination_dir: page
- # Extensions
- ## Plugins: https://hexo.io/plugins/
- ## Themes: https://hexo.io/themes/
- theme: next
- # Deployment
- ## Docs: https://hexo.io/docs/deployment.html
- deploy:
- type: Git
- repository: Git@GitHub.com:raysonfang/raysonblog.GitHub.io.Git
- branch: master
主要修改 3 个地方:
Site 站点信息配置
URL 域名信息配置
theme 主题配置
Deploy 代码托管提交配置
4.2 主题的配置文件
主题中的配置文件跟每个主题有关, 可以自己尝试修改, 然后运行看效果.
五. 准备一个属于自己的专属域名
上面的博客只能在本地访问, 需要放到外网上去, 还得将编译好的静态文件提交到代码托管平台, 比如 GitHub, Gitee 等, 这些平台都支持 Pages 服务. 至于如何部署, 网上也可以找到资料. 购买了自己的域名, 那配置也相对简单.
六. 问题总结
1. GitHub Pages 自定义域名后每次 hexo d 都会失效解决
只要在 source 目录添加一个新文件 CNAME 就好
CNAME - 不带任何后缀, 这就是全称, 里面写的是你的域名
然后就 ok 了.
怎么 push 都不用再去 GitHub Pages 设置了
2. 如何让文章能被指定的 layout 样式渲染
---
title: 关于我
- layout: about #指定模板
- ---
3. 文件分类如何指定二级分类
---
title: 我的个人博客搭建之旅
date: 2019-6-27 16:50:32
author: 方子龙
- original: true # 自定义文章属性 原创标识
- tuijian: true # 自定义文章属性 推荐标识
- categories: #分类
- 杂谈 #一级分类
- 个人感想 # 二级分类
tags:
- 杂谈
---
4. 文章如何自定义属性以及模板如何取值
---
title: 我的个人博客搭建之旅
date: 2019-6-27 16:50:32
author: 方子龙 # 自定义文章属性 作者
- original: true # 自定义文章属性 原创标识
- tuijian: true # 自定义文章属性 推荐标识
- categories: #分类
- 杂谈 #一级分类
- 个人感想 # 二级分类
tags:
- 杂谈
---
在模板中取值:
- post.author
- post.original
- post.tuijian
5. 如何获取整个站点的文章
site.posts
6. 添加 gitment 评论 解决 object ProgressEvent, 汉化等问题
直接添加如下:
- <link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
- <script src="https://billts.site/js/gitment.js"></script>
- <div id="gitmentContainer"></div>
- <link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
- <script src="https://billts.site/js/gitment.js"></script>
- <script>
- var gitment = new Gitment({
- id: '<%= page.date %>',
- owner: '<%=theme.comment.gitment.github_user%>',
- repo: '<%=theme.comment.gitment.github_repo%>',
- OAuth: {
- client_id: '<%=theme.comment.gitment.client_id%>',
- client_secret: '<%=theme.comment.gitment.client_secret%>',
- },
- cleanly: '<%=theme.comment.gitment.cleanly%>',
- });
- gitment.render('gitmentContainer');
- <%if(theme.comment.gitment.cleanly) {%>
- $('.gitment-container.gitment-footer-container').hide();
- <%}%>
- </script>
试一试评论:
七. 总结
在搭建博客之前, 我就想过自己的博客要有 "书单","工具","写作 & 翻译" 等菜单, 就都放置到了博客的菜单栏上, 随后又得考虑每一个菜单页的内容布局要怎么做. 后来发现每一个菜单的内容没有好的布局, 总是零散的. 所以我忍痛割爱, 在没有好的想法之前, 就先隐藏掉. 在修改主题的代码过程中, 还是很有一点难度. 不过慢慢地也就得心应手了, 知道怎么修改主题里的代码. 我总是爱折腾的, 时间花的比较多, 但是收获总是很多.
来源: https://www.cnblogs.com/werewolfBoy/p/11102684.html