快速搭建一个本身的我的博客(Github Pages~二次元主题)

前言

本次的一个布局技术都写的很是详细了,只要按着来就行,不过,先说明本次主题为二次元主题。
若是真的喜欢本主题的不妨能够试一试(==建议跟据目录来看==)前端

在好久好久之前。。。。vue

嘛,就在前不久我正在。。
在这里插入图片描述java

额,上图仅仅表示个人无敌 无聊,本人不抽烟。
嗯嗯,在我闲来无事的过程当中我找到了一个我特别喜欢的我的博客网站;
而后:(放图~哦哦)
在这里插入图片描述git

大佬”蝉时雨“,本身写的主题:
一、所用前端技术:vue
二、博客文章存储技术:Github issuses(就是原项目的讨论部分,分类,心情也是使用的,待会细讲)
三、博客评论技术:Gittalk (嗯,就是github提供的开发者设置里面有)
四、博客热度技术:LeanCloud (由于没有后端数据库方面,因此使用第三方存储)github

传送门:蝉时雨的网站
传送门:蝉时雨的githubvue-cli

嘛,待会就以这几个部分讲解数据库


技术简单过

先说好其实并不难,真的不难,按着来就行!!!
思惟图以下:
在这里插入图片描述
脑图版:
在这里插入图片描述npm

本次的仓库:
在这里插入图片描述后端

本次的要改动代码:
在这里插入图片描述
本次环境:markdown

在食用 Aurora 主题以前,需先安装 Nodejs 和 Git 环境,这两步没必要细说。环境安装完毕,因为 Aurora 使用 vue 开发,因此须要安装 vue-cli。

欧克,Let`go


Github Pages 的部署(我的网址的托管)

一、建立本身github的Pages(并把项目拉下来本身测试跑)

①、安装环境和拉取项目

需先安装 Nodejs 和 Git 环境,这两步没必要细说

①安装vue-cli

npm install -g @vue/cli-service-global

②拉取项目(唔,常常玩的却是不用这么解释了)

# clone 主题
git clone git@github.com:chanshiyucx/aurora.git
 
# 进入主题目录
cd aurora
 
# 安装依赖包
npm install
 
# 本地预览
npm start

依赖包安装完毕,即可执行 npm start 本地预览效果,访问 http://localhost:8080/, 固然如今看到的是蝉时雨的博客

②、建立本身github的Pages

重点是 github pages库的建立,而且一个用户只能有一个Pages

在这里插入图片描述
一、测试
在这里插入图片描述
二、选主题在这里插入图片描述

三、而后直接在网址输入本身的网址,(好比个人:liwangwang321.github.io)

个人是个人主题,大家是刚刚选择的主题。。。
在这里插入图片描述


二、如何把本身本地的项目部署到本身的Pages

这个时候咱们已经简单的把大佬的主题拉下来了,
那么就开始第一次部署到本身的Pages上(啥也不改)

如今大佬的主题有一键部署的功能
在这里插入图片描述
修改内容
在这里插入图片描述
而后记得 Shift+右键 (用管理员的权限执行命令,我以前第一次没执行成功,而后使用管理员权限就好了)
在这里插入图片描述
成功
在这里插入图片描述


Github issues (原功能是追踪项目的)

一、配置专门访问的token令牌

①、注册一个token令牌

这个token令牌是用来去访问github仓库的访问权限的设置。
在这里插入图片描述

成功后:
在这里插入图片描述

②、把注册完的token令牌设置到本身的项目中

在这里插入图片描述


二、设置(书单,灵感,友链,关于)、(分类,标签)

在这里插入图片描述

①设置closed的issues

在这里插入图片描述
设置labels(也能够设置分类)
在这里插入图片描述


②设置open的issues

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


③书单,关于,友链格式规定(标签,分类设置)

书单:书单页面使用##作分割,内容示例以下:

## ES6 标准入门
 
author: 阮一峰
published: 2017-09-01
progress: 正在阅读...
rating: 5,
postTitle: ES6 标准入门
postLink: //chanshiyu.com/#/post/12
cover: //chanshiyu.com/yoi/2019/ES6-标准入门.jpg
link: //www.duokan.com/book/169714
description: 柏林已经来了命令,阿尔萨斯和洛林的学校只许教 ES6 了...他转身朝着黑板,拿起一支粉笔,使出全身的力量,写了两个大字:“ES6 万岁!”(《最后一课》)。

友链:友链页面使用##作分割,内容示例以下:

## 阁子
 
link: //newdee.cf/
cover: //i.loli.net/2018/12/15/5c14f329b2c88.png
avatar: //i.loli.net/2018/12/15/5c14f3299c639.jpg

关于:关于页面使用##作分割,内容示例以下:

## 关于
 
随便

==标签设置==
在这里插入图片描述
==分类设置==
在这里插入图片描述

==文章模块==
文章模板没有太多的格式约束,只须要在文章正文顶部加上封面配图便可,配图采用的是 markdown 的注释语法,因此并不会在正文里渲染,之后即便你更换博客主题,也不会影响内容的展现。

[pixiv: 41652582]: # 'https://raw.githubusercontent.com/chanshiyucx/yoi/master/bg/3.jpg'

在这里插入图片描述


Gitalk (评论系统)

一、设置一个评论应用

位置:
在这里插入图片描述
新建引用
在这里插入图片描述

二、把注册完的ID和Secret放到本身项目中

位置:

在这里插入图片描述

修改文件:
在这里插入图片描述

三、给每个须要评论的文章或者(关于,书单,友链)建一个 issues

具体的能够去大佬的仓库看看
传送门:蝉时雨的github
在这里插入图片描述


LeanCloud (第三方管理数据,相似数据库的概念)

在这里插入图片描述

一、注册LeanCloud帐户和建立应用

帐户要是国际版的
在这里插入图片描述
建立应用
在这里插入图片描述

二、建立三个class(Comment,Counter,Visitor)

在这里插入图片描述

三、把对应的ID 和Key来修改本身配置

在这里插入图片描述
修改配置
在这里插入图片描述


后言

嘛,差很少了,其实要改变的配置就改变那个config.js就差很少了,

其余的感受多玩下github就行,

啊啊,不过说实话以前仍是不太会玩github来着,如今。。。。。

若是真的喜欢本主题的不妨能够试一试,==仓库能够直接去看==
在这里插入图片描述

传送门:蝉时雨的网站
传送门:蝉时雨的github
个人传送门:https://liwangwang321.github.io/

相关文章
相关标签/搜索