用 Typora 编辑博客丶
想用 Typora 编写博客
Typora 是一款流行的 Markdown 编辑器,不完美,内容多了会卡;这货是免费的!
Markdown
-
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档
-
Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建
-
Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档
- Markdown 编写的文档后缀为 .md, .markdown
Markdown 标题
先输入两个#号,再输入一个空格和标题的文字,再回车
# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题
提升或降低标题级别:ctrl+=、ctrl+-、ctrl+数字(小键盘上的不好使)
关于标题的内容,一个心得:把关键词放上去
Markdown 段落
摸索发现:回车了就是新的段落了,一直不回车的话,直到一行都结束,下一行开始了,该段落的每一行都是紧凑的。
字体
有三种形式:斜体、粗体、斜体加粗体
怎么搞出来的呢?前后加一颗星、两颗星、三颗星(或者不加星而加下划线)
实际写的时候用快捷键:斜体ctrl+i、粗体ctrl+b
骚操作:下划线ctrl+u、删除线ait+shift+5
两头加双等号可以加背景高亮
也可以鼠标点击格式菜单选项,另外源代码模式也可以看出格式写法
分割线
三个以上的星号或井号或下划线都可以搞出一个分割线来
如这行字的上方,只是有些不明显,后面自定义好看点的
脚注
就是鼠标放上去后,弹出框中提示的内容
怎么搞出来呢?鼠标操作→段落→脚注
Markdown 列表
无序列表:星号或加号或减号,加上一个空格,加上内容
- 星号可以
- 加号和减号也可以,但是怎么结束这个列表的编辑呢?答案是ctrl+[
有序列表:数字加上点号加空格加内容
- 可以成功
- 同样的问题,怎么退出这个列表编辑状态呢?答案是ctrl+[
- 四个空格等价
有序列表和无序列表可以进行嵌套
Markdown 区块
引用、说明、PS
三月七日,沙湖道中遇雨,雨具先去,同行皆狼狈,余独不觉。已而遂晴,故作此词。
怎么搞出来的呢?尖括号加空格。这个颜色可以自定义好看点的
里边可结合列表使用,这样让列表看起来舒服点
Markdown 代码
$(document).ready(function () {
alert('RUNOOB');
});
怎么搞成这么优美的样子呢?①直接按tab键后粘贴代码再填语言类型,或②先按三下反引号填语言再粘贴代码,或③也可以不管语言直接粘贴代码
Markdown 链接
有两种形式:
中括号 接 括弧 形式,前者是名称 后者是链接地址
或者
<链接地址>
Markdown 图片
感叹号加中括号加括弧,中括号内为图片名称,括弧内为图片路径
但是有个问题,服务器图片满了咋整~
Markdown 表格
使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行
| 表头 | 表头 |
| ---- | ---- |这一行配合冒号使用可以控制对齐格式
| 单元格 | 单元格 |
| 单元格 | 单元格 |
表头 | 表头 |
---|---|
单元格 | 单元格 |
单元格 | 单元格 |
Markdown 高级技巧
\转义字符
去掉特殊含义
快捷键
组合键 | 作用 |
---|---|
ctrl+shift+i | 插入图片 |
ctrl+k | 插入链接 |
ctrl+t | 插入表格 |
ctrl+L | 选中当前行 |
ctrl+d | 选中单词 |
ctrl+h | 替换 |
全屏模式+专注模式+night主题 贼舒服!
Markdown 画图
具体怎么玩还要进一步研究
横向流程图源码格式
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
竖向流程图源码格式
graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]
F[竖向流程图]
标准流程图源码格式
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
UML时序图源码样例
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗?
UML时序图源码复杂样例
Title: 标题:复杂使用
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗?
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
UML标准时序图样例
%% 时序图例子,-> 直线,-->虚线,->>实线箭头
sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五你好吗?
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!
甘特图样例
%% 语法示例
gantt
dateFormat YYYY-MM-DD
title 软件开发甘特图
section 设计
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI设计 : des3, after des2, 5d
未来任务 : des4, after des3, 5d
section 开发
学习准备理解需求 :crit, done, 2014-01-06,24h
设计框架 :crit, done, after des2, 2d
开发 :crit, active, 3d
未来任务 :crit, 5d
耍 :2d
section 测试
功能测试 :active, a1, after des3, 3d
压力测试 :after a1 , 20h
测试报告 : 48h
Typora 设置
修改设置,根据习惯来
修改主题的css
找到需要修改的位置
修改
/*
blockquote {
border-left: 4px solid #dfe2e5;
padding: 0 15px;
color: #777777;
}
*/
blockquote {
border-left: 4px solid #62ca38;
padding: 0 15px;
color: #777777;
}
高亮快捷键
完成本地编辑
- 目测 markdown 已经是趋势,很多博客都会支持 markdown,尽管兼容性都不好;
- 编辑完成可以导出很多格式;
- 放到GitHub上作版本控制是对劳动成果的最好保护(电脑最近经常死机蓝屏,要记得随时保存);
- 另外一个就是考虑展示博文的地方;
尝试在主流博客进行发布
直接将本地编辑好的内容拷贝上去即可,但是渲染还是会有很多问题(有的画图渲染不起:甘特图、时序图、流程图;有的区块渲染也有问题,图片也显示不了)
搭建自己的WordPress
也就是搭建自己的博客网站。大致步骤如下:
SSL证书注册(非必须)
重装云主机系统,让一起变得清新脱俗!
搭建 WordPress 博客、安装配置Nginx
配置域名解析
WordPress安装插件及设置
SSL证书注册
去这里花45块钱/年购买,过程中慢操作并进行一通设置,完了之后可进行修改子域名和证书下载,解压放到服务器etc下,完了就是在nginx中配置的事了。完了就可以https访问了~
- 服务器安装证书:解压,上传到服务器即可
- 自动续签:暂时不用考虑
- 配置nginx:如果用了https,wordpress设置内也要用https,不然格式会很乱
重装系统
环境有时候装坏了,就得先从重装云主机开始
安装docker
# 安装 gcc 环境
yum -y install gcc
yum -y install gcc-c++
# 需要的安装包
sudo yum install -y yum-utils
# 设置镜像的仓库
sudo yum-config-manager \
--add-repo \
http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
# 更新yum软件包索引
yum makecache fast
#安装Docker引擎(ce表示社区版,ee表示企业版)
sudo yum install docker-ce docker-ce-cli containerd.io
#启动Docker
systemctl start docker
docker version
# 开机启动
# CentOS 7 新式语法
systemctl start docker.service
# hello world
docker run hello-world
#镜像加速(尽管我买的是Ucloud云主机,还是可以去注册阿里云账号,生成如下信息!阿里云NB丶)
sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
"registry-mirrors": ["https://xnoai7333这里修改33334w.mirror.aliyuncs.com"]
}
EOF
sudo systemctl daemon-reload
sudo systemctl restart docker
安装docker-compose
# 下载
# 国内的镜像(版本可以跟着官网的版本指定):
curl -L https://get.daocloud.io/docker/compose/releases/download/1.27.3/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
# 授权
sudo chmod +x /usr/local/bin/docker-compose
搭建WordPress
# 下方小操作是为了解决后面插件安装不了的问题,后面考虑写成shell脚本
cd /var
mkdir www
cd /var/www
mkdir html
cd /usr/local/etc
mkdir php
cd /usr/local/etc/php/
mkdir conf.d
cd /usr/local/etc/php/conf.d
vi uploads.ini
uploads.ini内容
file_uploads = On
memory_limit = 128M
upload_max_filesize = 512M
post_max_size = 128M
max_execution_time = 600
安装插件的问题是这样解决的
# 安装或者更新nss
yum install nss # 或者 yum update nss
配置docker-compose.yml
cd /data
mkdir my_wordpress
cd /data/my_wordpress
vim docker-compose.yml
docker-compose.yml内容如下
version: '3.3'
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always # command: --default-authentication-plugin=mysql_native_password 如果是mysql8的话,和restart并列
ports: # 如果不写端口映射的话,外部无法连接该mysql
- "3306:3306"
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
wordpress:
depends_on: # 依赖上方的 db service
- db
image: wordpress:latest
ports:
- "8000:80"
volumes:
- ./wp_site:/var/www/html
- ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
WORDPRESS_DB_NAME: wordpress
WORDPRESS_CONFIG_EXTRA: "define('WP_HOME','https://blog.possible2dream.cn'); define('WP_SITEURL','https://blog.possible2dream.cn');" # 定义域名
volumes:
db_data: {}
部署&启动
docker-compose up -d #后台启动
数据库客户端连接有问题可以尝试
#进入mysql容器
docker-compose exec db bash
#登陆数据库
mysql -u root -p
密码是somewordpress
use mysql;
#开启root远程访问权限
grant all on *.* to 'root'@'%';
#修改加密规则
alter user 'root'@'localhost' identified by 'root' password expire never;
#更新密码
alter user 'root'@'%' identified with mysql_native_password by 'root';
#刷新权限
flush privileges;
将https证书解压上传到/etc
安装Nginx(暂时不用docker起)
cd /root
wget -c http://nginx.org/download/nginx-1.18.0.tar.gz
tar -zxvf nginx-1.18.0.tar.gz
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel
cd /root/nginx-1.18.0
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module
make
make install
cd /usr/local/nginx/conf
# 编辑配置文件 用notepadd编辑舒服些
vi nginx.conf
配置文件
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
client_max_body_size 2000m; #最大限制为2000M(上传文件大小)
keepalive_timeout 3600;
upstream wordpress {
#server 106.75.32.166:8000;
server 127.0.0.1:8000 fail_timeout=10s;
}
server {
listen 80;
server_name *.possible2dream.cn;
return 301 https://$host$request_uri;
}
server {
server_name blog.possible2dream.cn;
listen 443 ssl;
ssl_certificate /etc/certs/Nginx/blog.possible2dream.cn.crt;
ssl_certificate_key /etc/certs/Nginx/blog.possible2dream.cn.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
# 主机中 WordPress 数据卷位置
root /var/lib/docker/volumes/my_wordpress_db_data/_data;
location / {
proxy_pass http://wordpress;
proxy_read_timeout 3600;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto https;
}
}
}
启动nginx
cd /usr/local/nginx/sbin
./nginx
./nginx -s reload
netstat -ntlp
域名解析
关于域名,四个地方都要一致:
- https证书注册的地方
- 域名解析配置的地方
- wordpress站内配置
- nginx配置内
开启需要用的端口
访问有问题检查数据库
WordPress安装插件
安装失败试试扶墙vpn
编辑发布博客
有了自己的博客网站
- 用Typora编辑,到哪都适用,还能转成很多格式丶
- 在GitHub上搞个私有仓库对所有的文档进行版本控制(GitHub支持免费私有仓库啦!!感谢盖茨!等于我们有了属于自己的云笔记!并且GitHub对Markdown支持挺好的,除了画图的部分)
- WordPress只是一个展示博文的地方,另外需要解决WordPress图床的问题丶
- 接下来就是堆博客的事情了