不写代码,搭建自己的文章搭客

    xiaoxiao2022-07-12  145

    配置本地环境

    1、下载安装这两个软件 Git-2.21.0-64-bit.exe    node-v10.15.3-x64.msi  如下图

    2、在自己电脑某个盘里新建一个文件夹(自定义名称)  我的文件夹名称为 czjblog

    3、然后在文件夹里,右键—>选择Git Bash Here  就打开另一个窗口了,如下图

     

    4、安装hexo  用命令 npm install hexo –g  如果网络好的话很快就行了

    5、检查一下是否安装成功   用命令 hexo –v  出现以下图说明成功了

     

    6、初始化自己创建的文件夹  用命令 hexo  init

     

    7、生成静态页面  用命令  hexo  g

    8、启动项目 用命令  hexo  s   出现如下图说明启动成功  去浏览器输入 http://localhost:4000 来访问了.

     

    配置github环境

    1、首先得去github官网上面去注册一个账号

    2、然后新建一个仓库依赖,如下图

    3、然后来到这页面,如下图

    https://github.com/caozhongjue/caozhongjue.github.io.git

    git@github.com:caozhongjue/caozhongjue.github.io.git

    4、然后修改本地博客目录的配置:

    修改本次博客根目录下的_config.yml文件,修改deploy下的配置如下:

    type: git

    repository:  git@github.com:caozhongjue/caozhongjue.github.io.git  //caozhongjue换为自己的

    branch: master

    5、控制台命令:npm install --save hexo-deployer-git    //安装部署插件

    6、由于我是用ssh 与github关联的,所以得操作这步,输入命令 ssh-keygen -t rsa -C “2857113935@qq.com”  连续回车三下生成密钥,最后得到了两个文件:id_rsa和id_rsa.pub(默认存储路径是:C:\Users\Administrator\.ssh)

    如下图 

    7、经过上面的步骤,在C:\Users\Administrator\.ssh下面生成了一个id_rsa.pub文件,把里面的内容复制到 github ssh安全那里,如下面

    标题随便填,键是id_rsa.pub文件里面的内容。

    8、可以使用hexo d 发布项目到github上面去了  如下图

    更改默认主题样式

    Next主题的使用说明

    http://theme-next.iissnan.com/getting-started.html

     

    1、使用命令  git clone https://github.com/iissnan/hexo-theme-next

    2、修改项目目录下_config.yml文件内容,把theme:后面的内容换为hexo-theme-next

    theme:  hexo-theme-next  #修改网站主题样式

    title: czj'blog  #

    author:  czj  #修改作者

    language:  zh-Hans  #修改网站的显示语言,这里是中文

    3、修改项目目录下hexo-theme-next 主题下的_config.yml文件内容,

    menu:

            home: / || home

            about: /about/ || user

            tags: /tags/ || tags

            categories: /categories/ || th

            archives: /archives/ || archive

    上面这几个就是下面的

    1、添加分类模块 命令如下

    hexo new page categories

     

    你会发现你的source文件夹下有了categorcies/index.md,打开index.md文件将title设置为title: 分类

    3、打开 主题配置文件 找到menu,将categorcies取消注释

    4、把文章归入分类只需在文章的顶部标题下方添加categories字段,即可自动创建分类名并加入对应的分类中

    举个栗子:

    title: 分类测试文章标题

    categories: 分类名

     

    添加标签模块  命令hexo new page tags

    同上

    添加关于模块   命令hexo new page about

    同上

    highlight_theme: night bright  #代码的样式

    avatar: https://s2.ax1x.com/2019/05/23/VPZiAe.png   #设置头像

    4、添加搜索功能

    4.1、安装 hexo-generator-searchdb 插件

    npm install hexo-generator-searchdb --save

    4.2、打开 站点配置文件 找到Extensions在下面添加

    search:

             path: search.xml

             field: post

             format: html

             limit: 10000

    4.3、打开 主题配置文件 找到Local search,将enable设置为true

    5、修改文章内链接文本样式

    打开文件 themes/next/source/css/_common/components/post/post.styl,在末尾添加

    6、首页的文章只显示一半

    用文本编辑器打开 themes/next 目录下的 _config.yml 文件,找到这段代码:

    auto_excerpt:

      enable: false

      length: 150

    enable false 改成 true 就行了,然后 length 是设定文章预览的文本长度。

    修改后重启 hexo ok了。

    最后博客样式

    项目的目录结构

    source 文件夹存放着用markdown编辑器写的文章    每次添加文章都是用markdown编辑器写好保存,放到source下面的_post文件夹下面去

    themes 这里存放着样式

    _config.yml 主站点配置文件 ,themes样式文件夹下面的文件夹里也有个样式配置文件

    可以使用MarkdownPad2编辑器写文章,写完后,把那个.md文章放到source下的_post文件夹下,

    然后右键打开窗口, 依次使用命令 hexo clean  , hexo g  ,hexo d

     

     

     

     

    最新回复(0)