个人博客搭建
个人博客搭建
作者:张首富
时间:2020-10-09
w x:y18163201
邮箱:zsf18163201@163.com
博客地址: blog.zhangshoufu.com
[TOC]
blog 架构介绍
效果展示
www.zhangshoufu.com
blog.zhangshoufu.com
博客、笔记编写介绍
安装 Typora
软件官网地址为: https://typora.io/
这个软件目前支持mac 和windows,写完markdown文章之后是实时预览的,操作起来也比较方便,自己下载安装即可,这里不再赘述
windows快捷键
- 无序列表:输入-之后输入空格
- 有序列表:输入数字+“.”之后输入空格
- 任务列表:-[空格]空格 文字
- 标题:ctrl+数字
- 表格:ctrl+t
- 生成目录:[TOC]按回车
- 选中一整行:ctrl+l
- 选中单词:ctrl+d
- 选中相同格式的文字:ctrl+e
- 跳转到文章开头:ctrl+home
- 跳转到文章结尾:ctrl+end
- 搜索:ctrl+f
- 替换:ctrl+h
- 引用:输入>之后输入空格
- 代码块:ctrl+alt+f
- 加粗:ctrl+b
- 倾斜:ctrl+i
- 下划线:ctrl+u
- 删除线:alt+shift+5
- 插入图片:直接拖动到指定位置即可或者ctrl+shift+i
- 插入链接:ctrl + k
给代码块设置快捷键
偏好设置->打开高级设置->conf.user.json文件
"keyBinding": {
// for example:
// "Always on Top": "Ctrl+Shift+P"
"Always on Top": "Ctrl+Shift+P",
"Code Fences": "Ctrl+Shift+F",
"Ordered List":"Ctrl+Alt+o",
"Unordered List": "Ctrl+Alt+u"
},
Code Fences 代码块
Ordered List 数字有序列表
Unordered List 无序列表
Mac中的快捷键
- 最大标题:command + 1 或者:#
- 大标题:command + 2 或者:##
- 标准标题:command + 3 或者:###
- 中标题:command + 4 或者:####
- 小标题:command + 5 或者:#####
- 插入表格:command + T
- 插入代码:command + alt +c
- 行间公式 command + Alt + b
- 段落:command + 0
- 竖线 : command + Alt +q
- 有序列表(1. 2.) :输入数字+“.”之后输入空格 或者:command + Alt + o
- 黑点标记:command + Alt + u
- 隔离线shift + command + -
- 超链接:command + Alt + l
- 插入链接:command +k
- 下划线:command +u
- 加粗:command +b
- 搜索:command +f
可参考文章:https://www.cnblogs.com/hongdada/p/9776547.html
安装PicGo
软件官网:https://molunerfinn.com/PicGo/
这个有mac 和windows版本,根据自己的需求下载,安装之后我们需要配置他,我这边配置的是自己的阿里云的oss存储,可以根据自己的情况设置。
配置图床,我们这边选择的是阿里云的oss,所以我们只需要在软件里面配置即可
这里你可以选择别的图床
typora + PicGo实现图片自动上传至图库
1,配置好PicGo之后设置Typora
2,在Typora中,文件-->偏好设置
然后进行如下配置
然后就可以实现粘贴复制图片自动上传到图床,但是有的时候有问题
注册github账号
注册github账号在这个地方不再赘述,以后有时间单独写篇文章介绍,这里默认大家都会注册github账号,我们在GitHub.com 上登陆好自己的账号
然后创建项目,并设置成私有,这里都不赘述,关于git 和github的使用可以看这篇文章,
配置博客
通过BlogHelper 自动发布到网站
下载下来配置好自己要发布的网站之后进行发布,我们这里使用的是博客园,
美化博客园
使用BNDong 来美化博客园达到我们上面的效果,项目地址: https://github.com/BNDong/Cnblogs-Theme-SimpleMemory/tree/v1.3.3,
如何使用请查看教程:https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/Docs/GettingStarted/install 这里也不再赘述
通过github 实现自定义域名访问博客园
然后到项目里面创建两个文件,
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
window.location.href="https://www.cnblogs.com/shoufu/"; //配置自己博客园地址
</script>
</html>
CNAME
www.zhangshoufu.com //自定义的域名
然后到setting 里面配置可以通过web访问
setting ---> GitHub Pages ---> 然后设置成我这样
再到域名解析网站上把 www.zhangshoufu.com
解析成CNAME为shoufuzhang.github.io
然后我们就可以通过自己的域名访问博客园了。
通过DNS解析直接访问博客园
我们在阿里云上面配置一个隐性URL 解析就行,在DNS 解析里面设置,然后就可以正常访问。
截至我们的博客就搭建完成了,如果部署中有问题请联系我微信,或者邮箱
- Java案例-数组随机数
- Go语言图片处理和生成缩略图的方法
- Python3 怎么将Unicode转中文,以及GBK乱码ÖйúÉÙÊýÃñ×åÌØÉ«´åÕ¯
- 数据结构和算法——旋转打印链表
- C/C++——set的基本操作总结
- PHP基础——字符串的常用操作
- NLP之tfidf与textrank算法细节对比基于结巴分词
- 【Go 语言社区】算法课程 第一季 第4节-汉诺塔
- C/C++——map的基本操作总结
- Python生成词云图,TIIDF方法文本挖掘: 词频统计,词云图
- C/C++——vector的基本操作总结
- 数据库负载急剧提高的应急处理(二) (r9笔记第55天)
- 社团划分——有向图的Label Propagation算法
- Python基础——网络编程
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法