zoukankan      html  css  js  c++  java
  • Github部署博客

    使用的框架技术

    docsify框架
    基于Github Pages的站点部署

    准备工作

    1、要有git环境,有github账号

    windows下安装git可以看下这篇Git简易教程之git简介及安装

    因为我们要使用Github Pages来部署我们的应用,请先注册下github的账号。

    2、有node环境

    docsify框架需要有node环境的支持。上node.js的官网下载安装包,此处下载Windows版本的,点下一步一路安装下去即可。另外需要配置下环境变量。

    Windows下安装node环境,请自行百度教程安装。

    3、简要说明一下步骤

    上docsify官网了解下,里面有使用的步骤了。

    使用docsify命令生成文档站点

    在github上部署站点

    (最重要的特点:支持Markdown格式)

    使用docsify命令生成文档站点

    安装docsify-cli 工具

    推荐安装 docsify-cli 工具,可以方便创建及本地预览文档网站。
    npm i docsify-cli -g
    因为我们已经安装了node环境,所以直接打开CMD窗口执行上面的命令就好了。

    初始化一个项目

    然后我们选择一个目录,作为我们的博客站点目录。也就是项目要生成的目录。
    打开CMD黑框,cd到该目录,执行如下命令:
    docsify init ./docs

    可以看到,多了一个docs文件夹,其实这个文件夹就是将来我们存放MD格式的博客文件的地方。

    与此同时,docs目录下会生成几个文件。

    • index.html 入口文件
    • README.md 会做为主页内容渲染
    • .nojekyll 用于阻止 GitHub Pages 会忽略掉下划线开头的文件

    启动项目,预览效果

    到这里,就可以启动项目,然后看下效果了。使用下面命令启动项目:
    docsify serve docs
    浏览器输入:http://localhost:3000 即可访问

    增加一些配置,变身成真正的blogsite

    这里我们主要配置一下封面、左侧导航栏和首页,其他的配置可以参考docsify官网。

    • 配置左侧导航栏
      在 .docs目录下新建一个 _sidebar.md 的md文件,内容如下:
      alt _sidebar.md

    只有上面的 _sidebar.md 文件是不行滴,还需要在index.html文件中配置一下。在内嵌的js脚本中加上下面这句:loadSidebar: true

    • 配置个封面
      套路和上面配置左侧导航栏是一样的。
      首先新建一个 _coverpage.md 的md文件,这里面的内容就是你封面的内容。
      然后在index.xml文件中修改js脚本配置,添加一句:coverpage: true
    • 配置一个首页
      最后我们来配置下首页,也就是封面完了之后,第一个看到的界面。
      其实就是 docs 目录下 README.md 文件的内容。

    部署到Github上

    通过Github Pages的功能,我们可以将个人站点托管到github上。

    登录github账号,创建仓库

    登录github的官网,创建一个仓库,起个名字吧,就叫myblogs。
    仓库创建好了,我们使用第二种方式(public)导入一个本地仓库(本地仓库还没有创建,接下来会建一个)。

    • 创建本地仓库,推送到github
      首先我们进入我们的本地博客站点目录
      右键 GitBashHere 打开git命令行初始化一个仓库,并提交所有的博客文件到git本地仓库。
      涉及命令如下:
      git init //初始化一个仓库
      git add -A //添加所有文件到暂存区,也就是交给由git管理着
      git commit -m "myblogs first commit"//提交到git仓库,-m后面是注释
      git remote add origin https://github.com/Corefo/myblogs.gitgit push -u origin master //推送到远程myblogs仓库

    按上面的命令顺序操作,不出意外的话,我们的本地myblogs已经同步到了github上面了。
    刷新github的页面来看下。

    • 使用Github Pages功能建立站点
      在myblogs仓库下,选中 Settings 选项,然后鼠标一直向下滚动,直到看到 GitHubPages 页签,在Source下面选择 master branch/docs folder 选项。
      好了,结束了。
  • 相关阅读:
    C语言 弹跳小球
    selenium 相关操作
    aiohttp 多任务异步协程
    39 数据库索引
    36 数据库 库表行增删改查 枚举 集合
    07 线程池回调函数
    06 gevent版真正的协程
    05 greenlet版协程
    03 线程池
    04 生成器版协程
  • 原文地址:https://www.cnblogs.com/hacker-snail/p/13891448.html
Copyright © 2011-2022 走看看