当前位置:   article > 正文

githubPages托管静态页面和hexo搭建个人博客网址使用其来托管_github能托管多个静态html吗

github能托管多个静态html吗

githubPages托管静态页面和hexo搭建个人博客网址使用其来托管

Github-Pages 托管静态页面

  • 创建仓库,注意命名规则!!!

    用户名.github.io
    在这里插入图片描述

  • 创建静态页面,一定要是 index.html !!!(可以引入外联的样式和其他文件)

  • 可以直接通过源代码仓库名称作为的域名来访问
    在这里插入图片描述

使用Hexo搭建个人博客网址并托管

Hexo官方网址地址:hexo

  • 下载(需要node环境哦,建议先下载安装node

    npm install hexo-cli -g //全局安装哦
    
    • 1
  • 检查版本,确定是否下载成功

    $ hexo --version
    
    • 1

    在这里插入图片描述

  • 初始化以及新建博客

    • 初始化
    $ hexo init <title>
    //后面跟文件名 会自动创建该文件夹并且初始化
    
    • 1
    • 2
    • 切到创建的文件夹根目录
      在这里插入图片描述
  • 启动本地预览服务

    $ hexo server
    
    • 1

    在这里插入图片描述
    在这里插入图片描述

  • 创建新博客

    默认会创建在 source 目录的 _posts 文件夹下

    $ hexo new <title>
    
    • 1

在这里插入图片描述
在这里插入图片描述

  • 使用Github-pages部署到线上
    注意:
    在这里我把上面用来演示托管静态页面的仓库删掉了,重新建了一次,现在仓库是空的。

    • 配置文件 _config.yml

      需要修改 deploytyperepo
      在这里插入图片描述

    • 安装 hexo-delpoyer-git

      这个只需要在当前项目根目录下安装即可

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

在这里插入图片描述

  • 上线

    $ hexo deploy
    
    • 1

在这里插入图片描述

  • 日后修改如何更新?执行以下两部命令即可

    $ hexo generate --deploy
    $ hexo deploy --generate
    
    • 1
    • 2

    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

修改Hexo博客主题

hexo 默认使用themes里的landscape主题
我们可以在hexo官网或者github下载主题来使用
在这里插入图片描述

  • 查找资源

    • Hexo官网上面导航栏的主题
    • github搜索 hexo theme 关键字查找
  • 复制源代码仓库地址
    在这里插入图片描述

  • 在本地文件夹themes下clone刚刚复制的源代码仓库地址

    注意: 在末尾加上 --depth=1 会只下载最新的版本,默认会下载所有版本,会下载很多包并且速度慢!
    由于我第一个下载的主题有点问题使用不了,所有我又换了一个主题下载并且加了 --depth=1
    在这里插入图片描述
    在这里插入图片描述

  • 修改配置文件_config.xml文件的theme属性
    在这里插入图片描述

  • 重启本地服务可以重新查看本地预览

  • 使用上面提到的两行命令可以上传到线上仓库达到更新
    在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/715138
推荐阅读
相关标签
  

闽ICP备14008679号