zoukankan      html  css  js  c++  java

  • Hexo+Gitee搭建个人博客

    Hexo+Gitee搭建个人博客

    文章源地址（点击跳转）

    （一）前言

    • beacuse（事出有因）：

      很久之前就知道Hexo搭建个人博客，但由于懒，一直没有行动，在此之前一直用的是博客园。

    • but（但是）：

      今天打开博客园，发现网站进行整改，导致之前的博客无法查看，也无法发布新博客。

      image.png

    • so（因此）：

      本着自己动手，丰衣足食的原则，废话不多说，开始搭建自己专属的个人博客网站。

    • why（为什么选择Hexo+Gitee）：

      • Hexo官方网站提供详细的中文文档，可以帮助我们快速搭建个人博客。

      • GitHub的镜像在国外，访问速度会受到限制，当然也可以通过CDN加速，这里使用Gitee就不用担心限速问题了。

    （二）前期准备

    2.1 注册Gitee账号并创建一个仓库

    这里建议仓库的名称跟Gitee账号的用户名一致，这样后面生成的网站地址就没有二级目录，要短一些。

    2.2 开启Gitee Page服务

    image.png

    开启后如下图所示可以看到生成的网站地址：

    image.png

    2.3 安装node.js

    官网：https://nodejs.org/en/

    Node.js 的版本不低于 8.10，这里建议使用 Node.js 10.0 及以上版本。

    image.png

    下载完安装即可（安装很简单Next --> Next就可以）：

    image.png

    检查node.js是否安装成功，win+r打开cmd命令行界面，分别输入node -v和npm -v

    C:UsersDELL>node -v
v15.12.0

C:UsersDELL>npm -v
7.6.3

    由于npm默认的镜像是在国外，速度慢且可能出现异常，所以我们需要更换源镜像，这里替换成淘宝镜像：

    • 查看镜像源：npm get registry

      C:UsersDELL>npm get registry
https://registry.npm.taobao.org/

    • 修改镜像源：npm config set registry https://registry.npm.taobao.org

      C:UsersDELL>npm config set registry https://registry.npm.taobao.org

C:UsersDELL>npm get registry
https://registry.npm.taobao.org/

    2.4 安装Git

    官网地址：http://git-scm.com/

    2.5 安装Hexo

    所有必备的应用程序安装完成后，即可使用npm命令安装Hexo：npm install -g hexo-cli。

    C:UsersDELL>npm install -g hexo-cli

added 66 packages in 3s

    2.6 建站

    在电脑中创建一个文件夹用来存放博客，如：F:log 之后的命令行操作都在这个文件夹的目录下进行。

    生成默认博客：hexo init

    F:log>hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!

    目录结构：

    image.png

    本地启动：hexo s

    F:log>hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

    打开浏览器输入：http://localhost:4000，看到如下画面说明建站成功：

    image.png

    （三）提交到Gitee上

    打开根目录/blog下的_config.yml文件

    修改以下代码：

    deploy:
  type: git
  repo: https://gitee.com/cai_hesheng/cai_hesheng.git   #将地址换成自己的地址
  branch: master

    安装部署插件：

    F:log>npm install hexo-deployer-git --save

added 7 packages in 1s

    清理缓存：hexo clean

    生成静态文件：hexo g

    F:log>hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 108 ms
... 
INFO  Generated: js/jquery-3.4.1.min.js
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  17 files generated in 627 ms

    推送到Gitee：hexo d Gitee的用户名/邮箱 密码

    F:log>hexo d ********* *************
INFO  Validating config
INFO  Deploying: git
...
Branch 'master' set up to track remote branch 'master' from 'https://gitee.com/cai_hesheng/cai_hesheng.git'.
INFO  Deploy done: git

    打开Gitee仓库，可以看到我们推送成功的静态文件的目录结构：

    image.png

    再次修改根目录下的_config.yml文件：

    # URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://cai_hesheng.gitee.io # 修改成自己的Gitee Page的地址
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

    更新Gitee Pages，每次修改博客内容后都需要做以下操作：

    • hexo clean

    • hexo g

    • hexo d

    • 更新Gitee Pages服务

    image.png

    打开浏览器输入地址：https://cai_hesheng.gitee.io/，看到如下画面，说明提交成功：

    image-20210319154419416

    （四）装修博客

    4.1 下载主题

    这里使用到了前面安装的git命令，通过命令来克隆主题文件。

    切换到themes目录，右键单击，选择Git Bash Here：

    image.png

    输入命令：git clone https://gitee.com/yafine66/hexo-theme-matery.git

    $ git clone https://gitee.com/yafine66/hexo-theme-matery.git
Cloning into 'hexo-theme-matery'...
remote: Enumerating objects: 4860, done.
remote: Counting objects: 100% (4860/4860), done.
remote: Compressing objects: 100% (2021/2021), done.
remote: Total 4860 (delta 3200), reused 4179 (delta 2775), pack-reused 0
Receiving objects: 100% (4860/4860), 14.50 MiB | 1.51 MiB/s, done.
Resolving deltas: 100% (3200/3200), done.

    4.2 切换主题

    • 修改根目录下的 _config.yml 的 theme 的值：theme: hexo-theme-matery

    • 修改两个 per_page 的分页条数值为 6 的倍数，如：12、18 等，这样文章列表在各个屏幕下都能较好的显示。

    • 中文用户，建议修改 language 的值为 zh-CN。

    4.3 新建菜单页

    分类categories页、标签tags页、关于我about页（这里演示categories，其他类似创建）：

    categories 页是用来展示所有分类的页面，如果 source 目录下还没有 categories/index.md 文件，那么就需要新建一个，命令如下：

    hexo new page "categories"

    编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容：

    ---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

    4.4 其他样式配置

    更多样式的配置在hexo-theme-matery\_config.yml中修改。

    （五）新建文章

    输入命令：hexo new '文章名'

    F:log>hexo new 'Hexo+Gitee搭建个人博客'
INFO  Validating config
INFO  Created: F:logsource\_postsHexo-Gitee搭建个人博客.md

    Front-matter 选项中的所有内容均为非必填的。但仍然建议至少填写 title 和 date 的值。

    配置选项 默认值 描述
    title Markdown 的文件标题 文章标题
    date 文件创建时的日期时间 发布时间，应保证全局唯一
    author 根 _config.yml 中的 author 文章作者
    img featureImages 中的某个值 文章特征图
    top true 文章是否置顶，值为 true，则会作为首页推荐文章
    cover false 是否需要加入到首页轮播封面中
    coverImg 无 该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
    password 无 文章阅读密码，该值必须是用 SHA256 加密后的密码，防止被他人识破。
    toc true 是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。
    mathjax false 是否开启数学公式支持
    summary 无 文章卡片摘要显示的文字，如果无值程序会自动截取文章的部分内容作为摘要
    categories 无 文章分类，建议一篇文章一个分类
    tags 无 文章标签，一篇文章可以多个标签

    （六）参考

    （七）补充

    Hexo默认文章链接生成规则是按照年、月、日、标题来生成的。一旦文章标题或者发布时间被修改，URL 就会发生变化，之前文章地址也会变成404，而且URL层级很深，不利于分享和搜索引擎收录。
    image-20210319214115303

    • 安装插件：npm install hexo-abbrlink --save

      F:log>npm install hexo-abbrlink --save

added 5 packages in 2s

    • 修改配置

      修改博客根目录配置文件 _config.yml 的 permalink：

      permalink: p/:abbrlink.html  
abbrlink:
    alg: crc32   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex
  • 相关阅读:
    HTML_from
    HTML_img
    python_Django默认转换器
    python_虚拟环境
    python_正则表达式
    mysql_pymysql模块
    mysql_权限管理
    mysql_子查询
    sudo权限造成的故障
    22.Linux定时任务
  • 原文地址：https://www.cnblogs.com/caituotuo/p/14602851.html
Copyright © 2011-2022 走看看