美文网首页初见
hexo+next详细搭建

hexo+next详细搭建

作者: Gatlin | 来源:发表于2020-01-02 09:23 被阅读0次

    安装node

    • node下载地址:http://nodejs.cn/download/
    • 具体安装方法,这里不做详写
    • 安装完成可以通过node -v 查看安装是否生效和node的版本
    • 我这里使用的是v10.15.0版本

    github和coding

    • 这里对于git的使用,不会详写,具体请自行百度
    • github和coding都是git代码管理工具,拥有github pages 服务,可以设置静态服务页面
    • github的服务器是在国外,如果用github部署个人博客,访问的响应速度会比较慢
    • coding是腾讯云的代码管理工具,本人使用的是这个来部署的(必须企业版coding——团队人数在5人以下是免费的。选择个人版,在搭建https时,https证书可能会有一定的问题)
    • 先暂时不用做双线部署(国内访问coding服务,国外访问github服务),如果做成了双线部署,百度站长的https认证,可能会出现问题,原因不详

    博客初始化

    1. 安装hexo
    npm i -g hexo
    
    1. 新建存放项目的文件夹

    2. hexo初始化

    hexo init
    
    1. 查看是否安装成功
    hexo -v
    
    1. 初始化成功之后,会看到一系列文件夹

      • node_modules:是依赖包
      • public:存放的是生成的页面
      • scaffolds:命令生成文章等的模板
      • source:用命令创建的各种文章
      • themes:主题
      • _config.yml:整个博客的配置
      • db.json:source解析所得到的
      • package.json:项目所需模块项目的配置信息
    2. 将博客绑定到github(非必须)

      • 此处非必须,如果不想绑定github,请往下拉,会有绑定coding的方式

      • 登录github,创建仓库


        image
        image
      • 登录git bash绑定邮箱和用户名

        git config --global user.name "你的用户名"
        git config --global user.email "你的邮箱地址" 
        
      • 创建ssh
        输入ssh-keygen -t rsa -C "你的邮箱地址",找到此目录,C:\Users\你的用户名.ssh
        打开该文件夹下的id_rsa.pub文件,获取内容,copy

      • github setting配置ssh

        点击右上角的setting


        image

        点击右上角的new ssh key 将id_rsa.pub文件里面的内容全部粘贴进去,不用管格式内容啥的,直接全部粘贴


        image
      • 配置自定义域名解析(非必须)

        • 购买域名,无需备案(百度抓取你的个人博客文章链接,最好还是备案一下,有优先权,也容易被录取,否则,录取过程会很慢很慢。没录取就只能通过链接才能访问到你,直接百度搜索,搜索不到你。谷歌录取很快。_原谅我不会表述)
        • 相关工具,百度搜索,百度站长,谷歌搜索,谷歌站长
        • 需要在博客项目的source文件夹下创建一个CNAME的文件(无后缀)
        • 然后到域名配置DNS处,添加一条记录类型为CNAME,指向到“用户名.github.io” ,该路径是github静态网站部署后的默认访问路径,也是为什么仓库名称必须是用户名的原因
    3. 将博客绑定到coding

      • 注册企业版coding,企业版,企业版,企业版,重要的事情说三遍
      • 创建项目


        image
        image
      • 登录git bash绑定邮箱和用户名
        git config --global user.name "你的用户名"
        git config --global user.email "你的邮箱地址" 
        
      • 创建ssh
        输入ssh-keygen -t rsa -C "你的邮箱地址",找到此目录,C:\Users\你的用户名.ssh
        打开该文件夹下的id_rsa.pub文件,获取内容,copy
      • coding 设置添加ssh
        点击个人设置


        image

        添加公钥,将id_rsa.pub文件里面的内容全部粘贴进去,不用管格式内容啥的,直接全部粘贴


        image
      • 配置自定义域名解析(非必须)
        • 购买域名,无需备案(百度抓取你的个人博客文章链接,最好还是备案一下,有优先权,也容易被录取,否则,录取过程会很慢很慢。没录取就只能通过链接才能访问到你,直接百度搜索,搜索不到你。谷歌录取很快。_原谅我不会表述)
        • 相关工具,百度搜索,百度站长,谷歌搜索,谷歌站长


          image

          选择刚才新建的项目


          image
          新建完成,返回上一步,选择设置
          image

          设置后的页面,按照提示,进行域名配置


          image
          然后到域名配置DNS处,添加一条记录类型为CNAME,指向到“coding默认给的路径”
          我的记录集,没有github的配置,我给删除了
          image
    4. hexo配置和本地启动

      • 打开hexo init 文件中的_config.xml文件
      • 搜索deploy找到内容,修改
    deploy:
      type: git
      repo:
          #github: git@github.com:你的用户名/你的用户名.github.io.git,master
          coding: git@e.coding.net:你的用户名/你的用户名.git,master
    
    - 此处我的github是注释的,因为我没用该git管理工具
    - 可以找到刚才创建的项目,复制链接,后面拼接,master或者其他分支
        - github路径
        ![image](https://img.haomeiwen.com/i13081166/4988f25ca25846af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        - coding路径
        ![image](https://img.haomeiwen.com/i13081166/104edcbff38a883c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    - 本地运行,启动成功后,默认访问路径:localhost:4000
    
    hexo clean
    hexo -g
    hexo -s
    
    - 上传到服务端运行
    
    hexo clean
    hexo -g
    hexo -d
    
        - github访问路径:用户名.github.io
        - coding访问路径:创建项目成功之后,会给一个路径,用此路径访问
        - 如果配置域名,可以直接用域名访问
    

    主题配置-next

    1. next下载
    2. 配置
      • 普通配置:主题下载好之后只需要修改_config.xml
    3. 修改主题
      • 进入根目录下的_config.xml,搜索theme,将值更改为next(下载的主题的文件夹名称)
    4. 其他
    5. 注意
      • 那里花里胡哨的,本人不推荐使用。页面宠物,音乐插件,随机背景图片等等都是没必要的东西,会造成资源浪费,会很慢

    写文章

    • 博客建立好之后,就该进入重点了
    • 根目录-》source-》_posts 在此文件夹下写文章
    • 文章格式为md格式,不熟悉md格式的,可以查看https://www.runoob.com/markdown/md-tutorial.html
    • 写好md文章之后,在md文章头部插入
    id: design001             【/访问路径,不设置默认路径是文件夹名称】
    title: 标题
    date: 2019-12-04 00:00:00    【 时间,归档会用到】
    categories: 
      - 标签1
    tags:
    - 标签1
    - 标签2
    toc: true                     【是否开启目录】
    top: 20                      【排序,从大到小排序】
    
    • 推荐手动截取文章内容,在首页显示。在想要截取的地方添加

      <!--more -->
      
    • md文章格式,图片展示


      image
    • md文章格式,效果演示


      image

    _config.xml配置

    我在这里贴出我的两个_config.xml文件,但是别直接复制,粘贴,只供参考,有一些关于appid和key的私密性东西,我就随便改了一下
    例如:Valine评论

    主题配置文件的_config.xml

    点击我

    根目录配置文件的_config.xml

    点击我

    演示地址

    https://www.yangxj.top

    关于我

    详情查看 关于

    相关文章

      网友评论

        本文标题:hexo+next详细搭建

        本文链接:https://www.haomeiwen.com/subject/qhunoctx.html