Hello World, I'm Antrovirens

七月 14, 2019

Hi~ I am Antrovirens, lucky to see you here.

Welcome to Atrovirens’ Cafe! This is my very first post.

在这里我将分享我自己的建站过程

从hexo自定义到github部署

Hexo 是一个基于 Node.js 的静态博客程序，可以方便的生成静态网页托管在github和Heroku上。

hexo创建静态页面

第一步安装Node.js和Git

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.从官方页面下载持续支持版本的node.js(10.16.0 LTS)可执行安装程序
下载链接：Download for Windows (x64).

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
下载链接：downloading the latest (2.22.0) 64-bit version of Git for Windows.

第二步安装hexo

在合适的位置新建一个文件夹，用于存储数据，比如我的就是C\hexo
在准备好的文件夹右键，open Git Bash here，或者直接打开Git Bash然后cd 到自己的目录下面
直接npm的话，有几个包会被墙无法下载，需要切换到国内源。
更新npm下载源：

1	$ npm config set registry https://registry.npm.taobao.org

安装 Hexo :

1	$ npm install -g hexo

g 是 global 全局的意思，会自动下载到全局文件夹里面，所以看到的你自己的文件夹里不会有东西。
这里会报一些错，就像下面的那些代码那样，大概是版本问题之类的东西，还有几个警告，完全不会影像hexo的运行，不用管就了。如果不放心的话，就把那些过期的包重新npm install -g 一下。

C:\hexo>npm install hexo -g
npm WARN deprecated core-js@1.2.7: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
C:\Users\sheld\AppData\Roaming\npm\hexo -> C:\Users\sheld\AppData\Roaming\npm\node_modules\hexo\bin\hexo
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\hexo\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

安装依赖包：

1	$ npm install

在文件夹内初始化：

1	$ hexo init

node_modules：是依赖包
public：存放的是生成的页面
scaffolds：命令生成文章等的模板
source：用命令创建的各种文章
themes：主题
_config.yml：整个博客的配置
db.json：source解析所得到的
package.json：项目所需模块项目的配置信息

第三步配置hexo

生成网站:

1	$ hexo generate

启动Hexo server:

1	$ hexo server

成功后命令行提示如下 :

INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
表示Hexo服务已成功启动 , 在浏览器进入localhost:4000 即可查看页面

在文件_config.yml中可以进行网站设置的修改，在theme相应文件夹下的_config.yml可以进行该主题网站页面布局的修改，网站内容的修改，例如下面片段

title: Atrovirens’ Cáfe
subtitle: 来杯下午茶吧
description:
keywords:
author: antrovirens
language: 简体中文
timezone:

第四步设置ssh

如果还没有进行过git的初始配置，需要输入如下指令配置用户

1
2
3

sheld@Antrovirens MINGW64 ~
$ git config --global user.name "GitHub用户名"
$ git config --global user.email "GitHub邮箱"

1 2	$ cd ~/.ssh $ ls #或者 ll 查看文件夹内有无ssh配置文件

生成ssh密钥文件，

$ ssh-keygen -t rsa -C "GitHub邮箱"
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/sheld/.ssh/id_rsa):
#这里是要创建文件夹保存，输入文件夹名，直接回车就是默认位置
Enter passphrase (empty for no passphrase):
#这里输入配置的post密码  最小位数不少于5位，而且还不能太简单那，否则会失败
Enter same passphrase again:
Your identification has been saved in /c/Users/sheld/.ssh/id_rsa.
Your public key has been saved in /c/Users/sheld/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:**一段乱码** your_github_email@outlook.com
The key's randomart image is:
+---[RSA 2048]----+
|                 |
|                 |
|                 |
|    ?????????    |
|    ?????????    |
|   这是一张图片   |
|  ?????????????? |
|  ?????????????? |
|  ?????????????? |
+----[SHA256]-----+

sheld@Antrovirens MINGW64 ~/.ssh
$ cat id_rsa.pub
ssh-rsa **一段很长的乱码**  your_github_email@outlook.com
#用指令查看你的ssh密钥，然后添加到你的Githu账号里面去
#添加成功后，可以输入下面语句，输入post密码之后，弹出类似语句表示创建成功
$ ssh -T git@github.com
Enter passphrase for key '/c/Users/sheld/.ssh/id_rsa':
Hi Antrovirens! You've successfully authenticated, but GitHub does not provide shell access.

第五步部署到Github

在你的github下新建一个名字必须为username.github.io的个人仓库作为你的网站环境，我是很久之前做的了，具体步骤我也不去回忆了，不服责任的扔一个网址https://jingyan.baidu.com/article/e8cdb32b0ce12137042bad51.html
在username.github.io仓库下通过ssh clone得到ssh链接，在你的config文件下的deploy项目下修改相关信息，可以参考官方文档

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:Antrovirens/antrovirens.github.io.git
branch: master

接下来就可以直接部署了，一般的部署流程如下流程，

$ hexo clean
$ hexo g
$ hexo d 
ERROR Deployer not found: git
$ npm install --save hexo-deployer-git
$ hexo d 
#一段代码流和等待之后。。。
INFO  Deploy done: git

完事大吉欣赏自己的网站8

extra 因为偷懒又拖后的关于网站页面DIY的简单介绍

咕咕咕或许明天会更新

已经做了：部署rss订阅源新建文章更换封面图片流量统计文章中插入图片更多文字样式 gitalk
准备做： About页面的书写 readme.md文件的保留插入复杂数学公式

如何插入图片

1
2
3

![Alt text](图片链接 "optional title")
![avatar](/home/picture/1.png)
![avatar](http://baidu.com/pic/doge.png)

如何使图片水平居中
基础方法，代码如下

<div align = "center">
<img src = "" alt = "" />
</div>

<div align= "center">
<img src="https://antrovirens-1-1258258000.cos.ap-shanghai.myqcloud.com/post/190721/simple%20learning%20mechane.jpg" alt = "简单的学习器" width="300" height="100"/>
</div>

接下来的两个方法我没有试过，相关知识可以去W3chool上自己看
利用margin: 0 auto实现图片水平居中,利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下：

1
2
3

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="margin: 0 auto;" />
</div>

利用文本的水平居中属性text-align: center,代码如下:

1
2
3

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" />
</div>

如何插入公式
转自xinet的博客 https://www.cnblogs.com/q735613050/p/7253073.html

行中公式(放在文中与其它文字混编)可以用如下方法表示：
$ 数学公式 $
独立公式可以用如下方法表示：
$$ 数学公式 $$

^表示上标, _ 表示下标。如果上下标的内容多于一个字符，需要用{}将这些内容括成一个整体。上下标可以嵌套，也可以同时使用。
例子：
$$ x^{y^z}=(1+{\rm e}^x)^{-2xy^w} $$

x^{y^z}=(1+{\rm e}^x)^{-2xy^w}

另外，如果要在左右两边都有上下标，可以用\sideset 命令
$$ \sideset{^1_2}{^3_4}\bigotimes $$

\sideset{^1_2}{^3_4}\bigotimes

()、[]和|表示符号本身，使用 \{\} 来表示 {}。当要显示大号的括号或分隔符时，要用 \left 和 \right 命令。

$$\langle表达式\rangle$$ 尖括号
$$\lceil表达式\rceil$$ 向下取整
$$\lfloor表达式\rfloor$$ 向上取整
$$\lbrace表达式\rbrace$$ {}

$$ f(x,y,z) = 3y^2z \left( 3+\frac{7x+5}{1+y^2} \right) $$

$f(x,y,z) = 3y^2z \left( 3+\frac{7x+5}{1+y^2} \right)$

通常使用 \frac {分子} {分母}命令产生一个分数\frac {分子} {分母}，分数可嵌套。
便捷情况可直接输入 \frac ab来快速生成一个\frac ab。
如果分式很复杂，亦可使用分子 \over 分母命令，此时分数仅有一层。

使用 \sqrt [根指数，省略时为2] {被开方数}命令输入开方。

数学公式中常见的省略号有两种，\ldots 表示与文本底线对齐的省略号，\cdots 表示与文本中线对齐的省略号。

使用 \vec{矢量}来自动产生一个矢量。也可以使用 \overrightarrow等命令自定义字母上方的符号。
$$\overleftarrow{xy} \quad and \quad \overleftrightarrow{xy} \quad and \quad \overrightarrow{xy}$$

\overleftarrow{xy} \quad and \quad \overleftrightarrow{xy} \quad and \quad \overrightarrow{xy}

使用 \int_积分下限^积分上限 {被积表达式} 来输入一个积分。

使用\lim_{变量 \to 表达式} 表达式来输入一个极限。如有需求，可以更改 \to 符号至任意符号。

使用 \sum_{下标表达式}^{上标表达式} {累加表达式}来输入一个累加。
与之类似，使用 \prod \bigcup \bigcap来分别输入累乘、并集和交集。
此类符号在行内显示时上下标表达式将会移至右上角和右下角。
$$\sum_{i=1}^n \frac{1}{i^2} \quad and \quad \prod_{i=1}^n \frac{1}{i^2} \quad and \quad \bigcup_{i=1}^{2} R$$

$\sum_{i=1}^n \frac{1}{i^2} \quad and \quad \prod_{i=1}^n \frac{1}{i^2} \quad and \quad \bigcup_{i=1}^{2} R$

输入 \小写希腊字母英文全称和\首字母大写希腊字母英文全称来分别输入小写和大写希腊字母。
对于大写希腊字母与现有字母相同的，直接输入大写字母即可。

使用 \left和 \right来创建自动匹配高度的 (圆括号)，[方括号] 和 {花括号} 。
在每个公式末尾前使用\tag{行标}来实现行标。

若要对公式的某一部分字符进行字体转换，可以用 {\字体 {需转换的部分字符}} 命令，其中 \字体部分可以参照下表选择合适的字体。一般情况下，公式默认为意大利体.

\rm 罗马体
\boldsymbol 黑体
\mit 数学斜体
\bf 粗体

Gitalk配置

github - setting - developing settings - OAuth Apps -Register - 主页和返回也都填写为自己的homepage;
结束后得到一个ID 和密钥，填写到主题文件夹之下的config文件里面

gitalk:
    # 是否自动展开评论框
    autoExpand: false
    # 应用编号
    clientID: '**********'
    # 应用秘钥
    clientSecret: '***************'
    # issue仓库名
    repo: 'antrovirens.github.io'
    # Github名
    owner: 'antrovirens'
    # Github名
    admin: ['antrovirens']
    # Ensure uniqueness and length less than 50
    id: location.pathname
    # Facebook-like distraction free mode
    distractionFreeMode: false

查看评论