Building personal blog's processing......

本文最后更新于:1 年前


写在前面


​ 历时将近5天,小破站终于建成!😜只是跟随大佬的教程照抄的一些简单的功能,后续还会慢慢探索…..对于搭建过程网上教程很多 ,我的第一篇博客就简单记录搭建过程中遇到的一些问题还有近期笔记吧。。😂😂

Github搭建过程

  • 安装nodeJS、git和Hexo,注册Github

  • 配置SSH key

  • 部署到Github

  • 主题配置(next)

  • 故障调试方法

安装nodeJS、git和Hexo,注册Github

安装

  • 这里主要是Hexo安装时在CMD或Git Bash中执行以下指令:
1
$npm install -g hexo-cli
  • 但是可能会遇到卡住或安装慢的情况,可以先执行淘宝镜像
1
$npm install -g cnpm --registry=https://registry.npm.taobao.org

同样下面的所有安装步骤都可使用

注册Github

  • 注册后在邮箱中认证,点击Start project或者下面的 new repository 创建一个新的仓库
    BC40Gn.jpg

    • 特别注意!!Github 仅能使用一个同名仓库的代码托管一个静态站点

      [BC4B2q.jpg

    • 然后打开仓库创建一个 index.html 文件,并随意先写点内容

      BC4Dx0.jpg

BC4a5j.jpg


配置SSH key

  • 生成密钥 SSH key后,找到C盘个人账户文件夹/.ssh/id_rsa.pub,打开复制,登录 Github 上添加刚刚生成的SSH key,按以下步骤添加:

    BC4wPs.jpg

BC4sMV.jpg

这时会收到邮箱A new public key was added to your account

  • 此外还需确认并添加主机到本机SSH可信列表
1
$ssh -T git@github.com

如果提示Are you sure you want to continue connecting (yes/no)?

输入yes,若返回 Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. 内容,则证明添加成功。

部署到github

  • 配置_config.yml中有关deploy的部分:

正确写法:

1
2
3
4
deploy:
type: git
repository: git@github.com:liuxianan/liuxianan.github.io.git
branch: master

错误写法:

1
2
3
4
deploy:
type: github
repository:https://github.com/yourname/yourname.github.io.git
branch: master

后面一种写法是hexo2.x的写法,现在已经不行了,无论是哪种写法,此时直接执行hexo d的话一般会报如下错误:

1
Deployer not found: github 或者 Deployer not found: git

原因是还需要安装一个插件:

1
$npm install hexo-deployer-git --save

Tip:这里可以用淘宝镜像,见上。

部署这个命令一定要用git bash,否则会提示Permission denied (publickey).

  • 必用”三步走”:

    1. hexo clean 清除缓存文件 (db.json) 和已生成的静态文件

    2. hexo g 生成静态页面至public目录

    3. hexo d 部署到GitHub

主题配置(next)

  • 我使用的是next中的Gemini,所以就简单记录一些功能

    站点配置文件 _config.yml中theme改为next,默认landscape

    首先区分站点配置文件_config.yml指Blog下的 _config.yml

    另一个在theme下,所有的主题配置几乎都在这两个文件中

个人简介

  • 站点配置文件 _config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    title: # 标题
    subtitle: #副标
    description: #个人描述
    keywords:
    author: # 作者
    language: zh-CN # 主题语言
    timezone: Asia/Shanghai #不要乱改城市,这里容易出故障,必要时可直接删除试试

    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: https://example。com #绑定域名
    root: / #默认根路径,指向实际的source
    permalink: :year/:month/:day/:title/
    permalink_defaults:
    pretty_urls:
    trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
    trailing_html: true # Set to false to remove trailing '.html' from permalinks

    # Directory
    source_dir: source
    public_dir: public
    tag_dir: tags
    archive_dir: archives
    category_dir: categories
    code_dir: downloads/code
    i18n_dir: :lang
    skip_render: README.md #部署的时候不包含的文件

    # Writing
    new_post_name: :title.md #默认的新博文名称
    default_layout: post #默认布局
    titlecase: false #Transform title into titlecase
    external_link:
    enable: true #Open external links in new tab
    field: site #Apply to the whole site
    exclude: ''
    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: true #自动判断代码语言
    tab_replace: ''
    wrap: true
    hljs: false
    prismjs:
    enable: false
    preprocess: true
    line_number: true
    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 #博客排序

    # 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 #博客时间格式
    ## updated_option supports 'mtime', 'date', 'empty'
    updated_option: 'mtime'

    # Pagination
    ## Set per_page to 0 to disable pagination
    per_page: 10 #同上
    pagination_dir: page

    #归档页的分页设置
    archive_generator: #归档页的配置
    per_page: 30 #归档页每页博客数
    yearly: true #按年归档
    monthly: true #按月归档
    #标签页的分页设置
    tag_generator:
    per_page: 20 #标签页每页博客数

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy: #博客部署
    type: git
    repo:git@github.com:yourname/yourname.github.io.git
    branch: master
  • next主题设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    override:false #表示是否将主题置为默认样式
    cache:
    enable:true #表示添加缓存功能,这样浏览器后续打开我们的博客网站会更快
    menu: #设置博客各个页面的相对路径,默认根路径是blog/source
    home: / || home
    about: /about/ || user
    tags: /tags/ || tags
    categories: /categories/ || th
    archives: /archives/ || archive
    #schedule: /schedule/ || calendar #日历
    #sitemap: /sitemap.xml || sitemap #站点地图,供搜索引擎爬取
    #commonweal: /404/ || heartbeat # 腾讯公益404

    # Enable/Disable menu icons / item badges.
    menu_settings:
    icons: true # 是否显示各个页面的图标
    badges: true # 是否显示分类/标签/归档页的内容量
    # Schemes
    scheme: Gemini

    语句前加#即为注释或按钮关闭,而加注释时也要先一个空格,用Sublime Text 3体验会比较明显,操作错误不会有对应颜色变化。

添加评论

  • 主题配置文件中搜索valine,改为ture

  • 注册登录LeanCloud,创建应用-设置-应用Keys,分别复制AppID、AppKey到文件中对应位置即可

添加字数统计和阅读时长

  • 先安装插件(Bash耐心等待~)

    1
    $npm install hexo-symbols-count-time --save
  • 站点配置文件下添加

    1
    2
    3
    4
    5
    6
    #字数统计
    symbols_count_time:
    symbols: true #是否统计字数
    time: false #是否统计阅读时长
    total_symbols: true #是否统计总字数
    total_time: ture #是否统计总阅读时长
  • 主题的配置文件下开启 symbols_count_time 字段

    执行“三步走”就可以看到了。。。

更新

新版本的NexT将每月发布。可以通过以下命令更新 NexT。
安装最新版本的 npm:
$ cd hexo-site
$ npm update hexo-theme-next
或更新到最新的主分支:
$ cd themes/next
$ git pull

不显示全部内容

  • 修改主题配置文件
1
2
3
4
5
6
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true #自动截取摘要

# Read more button
# If true, the read more button would be displayed in excerpt section.
read_more_btn: true #显示阅读全文按钮
  • 写文章时在合适的位置加上<!--more-->即可

添加博客自定义图标

默认为Hexo的标识,图标可以在easyiconbitbugiconfont等网站选择和制作,我是在iconfont上找的,下载放到blog/themes/next/sources/images目录下,并在主题配置文件更改:

1
2
3
4
5
favicon:
small: /images/****.png #对应一
medium: /images/****.png #二两个位置
apple_touch_icon: /images/128x128.png
safari_pinned_tab: /images/logo2.svg

本地图片上传

  • 先将图片上传至路过图床或其他图床

  • 在name.md中使用![名称](**) **拷贝图片链接


故障调试方法

  • 我主要是使用很传统的方法,即下载一份原始主题,若出现Error(看不懂)可以对应退回几步,从原文件拷贝复原
  • 还有一个备份方法,还没学会·····在路上去😊

等等等等,还有很多,当然主要参考[https://blog.csdn.net/nightmare_dimple/article/details/86661502]

[https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html]

[https://segmentfault.com/a/1190000017986794]

感谢大佬细致的菜鸟教程,我get了好多干货··~

写在后面

  • 时间紧,任务重,能力有限,但一直没有停下的心,就想我的Subtitle一样,追求源于热爱!!

  • My description:我们努力奔跑,只为追上那个曾被寄予厚望的自己。

另外友链推广大佬···😁

博客后期更换gitee,本章介绍围绕github但主题配置无区别。

感谢光顾👏



本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!