我的个人博客搭建之旅

蔚落 2021-11-04 19:46 381阅读 0赞

# 引言 #

从2017年到现在，总共有两次用Hexo来搭建个人博客。  
访问[方子龙的博客][Link 1]:[http://www.raysonblog.cn/][Link 1]

*  第一次：  
    在2017年的时候，开始想着用Java干它一个属于自己的博客，当然不是马上就开始干，得网上查找资料啊！看看是否有现成的能够直接使用。在此过程中，发现有很多的博客主题都基本上一致，而且还比较好看, 效果杠杠地。为了满足好奇心，就看到网站下方有关于`Hexo`的字样，就点进去看到了一下简介，而且还有很多好看的主题，还可以随意配置自己喜欢的主题。顿时我就打消了要自己写博客程序的念头。有这么好用的，当然是直接拿来即用。就这样，一边搭建一边学习也就有了Hexo+Next主题的第一版博客。
    
    遗憾的是，搭建成功以后，也没有去管理，任它荒废。  
    
 *  第二次：  
    搭建过程耗时一个月左右的时间，抽空闲时间来做，相比第一次，这次的搭建过程耗时比较长，主要原因是修改主题样式，对主题代码不熟悉。但是总体收获还是很多。效果样式都还比较喜欢，蛮符合我心里的预期。

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

# 一. 环境配置 #

【Nodejs】官网下载：[https://nodejs.org/zh-cn/][https_nodejs.org_zh-cn]

【Git】官网下载：[https://git-scm.com/][https_git-scm.com]

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

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

基础环境配置好以后，那么接下来就可以安装生成静态博客网站的关键--Hexo，其主要信息和安装命令，主题等都可以通过官网轻松的了解：[https://hexo.io/zh-cn/][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/][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，汉化等问题 ####

直接添加如下：

<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.raysonblog.cn/2019/06/27/my-first-blog/][https_www.raysonblog.cn_2019_06_27_my-first-blog]  
![gitment评论][gitment]

# 七. 总结 #

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

![即可关注, 不迷路][1240]

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

[Link 1]: http://www.raysonblog.cn/
[https_nodejs.org_zh-cn]: https://nodejs.org/zh-cn/
[https_git-scm.com]: https://git-scm.com/
[https_hexo.io_zh-cn]: https://hexo.io/zh-cn/
[https_hexo.io_themes]: https://hexo.io/themes/
[https_www.raysonblog.cn_2019_06_27_my-first-blog]: https://www.raysonblog.cn/2019/06/27/my-first-blog/
[gitment]: /images/20211104/336c5c9920cc4a7baa768973d414d84b.png
[1240]: /images/20211104/3d852514d8cb435394aed30892b43104.png