博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
我的个人博客搭建之旅
阅读量:4482 次
发布时间:2019-06-08

本文共 4506 字,大约阅读时间需要 15 分钟。

引言

从2017年到现在,总共有两次用Hexo来搭建个人博客。

访问:

  • 第一次:

    在2017年的时候,开始想着用Java干它一个属于自己的博客,当然不是马上就开始干,得网上查找资料啊!看看是否有现成的能够直接使用。在此过程中,发现有很多的博客主题都基本上一致,而且还比较好看, 效果杠杠地。为了满足好奇心,就看到网站下方有关于Hexo的字样,就点进去看到了一下简介,而且还有很多好看的主题,还可以随意配置自己喜欢的主题。顿时我就打消了要自己写博客程序的念头。有这么好用的,当然是直接拿来即用。就这样,一边搭建一边学习也就有了Hexo+Next主题的第一版博客。

    遗憾的是,搭建成功以后,也没有去管理,任它荒废。
  • 第二次:

    搭建过程耗时一个月左右的时间,抽空闲时间来做,相比第一次,这次的搭建过程耗时比较长,主要原因是修改主题样式,对主题代码不熟悉。但是总体收获还是很多。效果样式都还比较喜欢,蛮符合我心里的预期。

接下来,就谈谈如何搭建,以及一些思考。 具体详细如何搭建也可以百度。

一. 环境配置

【Nodejs】官网下载:

【Git】官网下载:

网上有很多相关的安装使用教程,我这里就不多余的说。自己动手才是硬道理。

二. Hexo的安装与常用基本命令

基础环境配置好以后,那么接下来就可以安装生成静态博客网站的关键--Hexo,其主要信息和安装命令,主题等都可以通过官网轻松的了解:

为了安装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主题下载与使用

主题官网浏览地址:

在选择主题的过程中耗费了很多的时间和遇到了很多问题,其原因就是主题功能不全以及选择自己喜欢的风格导致的。最后推荐搭建使用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技术干货,程序猿,Golangauthor: 方子龙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.cnroot: /permalink: :year/:month/:day/:title/permalink_defaults:# Directorysource_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriesbook_dir: bookscode_dir: downloads/codei18n_dir: :langskip_render:# Writingnew_post_name: :title.md # File name of new postsdefault_layout: posttitlecase: false # Transform title into titlecaseexternal_link: true # Open external links in new tabfilename_case: 0render_drafts: falsepost_asset_folder: falserelative_link: falsefuture: truehighlight:  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 & Tagdefault_category: uncategorizedcategory_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-DDtime_format: HH:mm:ss# Pagination## Set per_page to 0 to disable paginationper_page: 10pagination_dir: page# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: next# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:  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:32author: 方子龙original: true   # 自定义文章属性 原创标识tuijian: true    # 自定义文章属性  推荐标识categories: #分类- 杂谈     #一级分类- 个人感想 # 二级分类tags:- 杂谈---

4. 文章如何自定义属性以及模板如何取值

---title: 我的个人博客搭建之旅date: 2019-6-27 16:50:32author: 方子龙 # 自定义文章属性 作者original: true   # 自定义文章属性 原创标识tuijian: true    # 自定义文章属性  推荐标识categories: #分类- 杂谈     #一级分类- 个人感想 # 二级分类tags:- 杂谈---

在模板中取值:

post.authorpost.originalpost.tuijian

5. 如何获取整个站点的文章

site.posts

6. 添加gitment评论 解决object ProgressEvent,汉化等问题

直接添加如下:

试一试评论:

gitment评论

七. 总结

在搭建博客之前,我就想过自己的博客要有“书单”,“工具”,“写作&翻译”等菜单,就都放置到了博客的菜单栏上,随后又得考虑每一个菜单页的内容布局要怎么做。后来发现每一个菜单的内容没有好的布局,总是零散的。所以我忍痛割爱,在没有好的想法之前,就先隐藏掉。在修改主题的代码过程中,还是很有一点难度。不过慢慢地也就得心应手了,知道怎么修改主题里的代码。我总是爱折腾的,时间花的比较多,但是收获总是很多。

即可关注, 不迷路

转载于:https://www.cnblogs.com/werewolfBoy/p/11102684.html

你可能感兴趣的文章
ViurtualBox配置虚拟机Linux的网络环境
查看>>
VLC 媒体播放器
查看>>
\n ^ \t的使用
查看>>
css盒模型
查看>>
探索式测试:测试自动化
查看>>
make install fping
查看>>
面试笔试题
查看>>
MySql可视化工具MySQL Workbench使用教程
查看>>
个人站立会议第二阶段07
查看>>
云时代架构阅读笔记五——Web应用安全
查看>>
IOS 单击手势和cell点击冲突
查看>>
学习_HTML5_day3
查看>>
计算机网络与应用第二次笔记
查看>>
Django之ORM查询
查看>>
学习python第七天
查看>>
Flask基础(07)-->正则自定义转换器
查看>>
C++著名程序库的比较和学习经验(STL.Boost.GUI.XML.网络等等)
查看>>
Spring Boot构建RESTful API与单元测试
查看>>
【JavaScript你需要知道的基础知识~】
查看>>
谷歌搜索语法
查看>>