我创建博客的笔记

说明

这一项是用来说明我这个博客是怎么从无到有的,还有有了博客之后是怎么操作的,怎么发布博客之类的。
如果你也想创建一个自己的博客,那么这篇博客对你也许有一点用处,如果你只是想偷看我日记,呵呵,那这篇博客对你来说一点用处也没有。文绉绉的话少说,我们直接开始吧。

老师们:

我的github账号关注了许些人, 但是我还没有好好从他们那里学习,到目前为止,我只在这两位朋友那些学到了少许,所以只放上这两位朋友。如果你还想发现更多大牛,可以到我的github上找,顺便Follow一下我哦!哈哈!

博客是这样建起来的

你们很快就有自己的博客了,有没有些少激动???建议你先买个域名,不然到时候你喜欢的域名被人霸占了就不爽了。趁早买了好点。

域名的购买

这一项不多说,如果你能接受二级域名的话,那就不用买,有很多免费的。例如我的二级域名有https://allen151.github.io 。所谓的二级域名是后面有两个点的,逼格不够高,达不到我创建博客装逼的效果。所以我购买了一个一级域名http://allen.men 。.men结尾的域名比较便宜,学生党的我豪不犹豫……。
购买域名的方法随便百度,很简单,不多说,正如我之前说过的,内容多就会乱……。我是在阿里云买的,@阿里云,你要给我广告费。购买很简单,就像逛淘宝。

创建个人博客必备知识

  • github的基本使用
  • markdown语法
  • 安装nodejs
  • 简单的git命令
  • 制作网页基础(次要)

暂时想到这么多,以后想起来再补充,最主要是前面两项,后面的不懂皮毛也OK。

我使用的工具

  • HBuilder
    我使用这个软件来编写markdown,除此之外,还有很多类似的工具。
  • Sublime Text3
    我使用这个软件来编写代码,这个软件有很多精彩的插件,但是我都没怎么用上,我只是喜欢上了它的黑色背景和文件列表。
  • github for window
    这是github的PC端应用,有简单操作的客户端,初学者容易上手。

开始创建博客:

坐好你们的板凳,我们要开始了。
步骤:

  • 搭建环境准备(包括node.js和git环境,gitHub账户的配置)
  • 博客的服务器在哪呢
  • 安装Hexo
  • 配置Hexo
  • 怎样将Hexo与github page 联系起来

搭建环境

我觉得你们肯定会跳过这一步,因为如果有搭建个人博客计划的人,肯定在之前已经搭载好环境了。但是,我还是简单说一下吧,因为我要记载我的博客从无到有,就是这么拽。

注册github账号

网站:https://github.com。
即使是全英的,对于我们编程者来说肯定也不是什么难题。作为编程者,没有些基本的英语基础,不能读懂技术文档,那怎么行呢?如果你担心英语,那赶快偷偷地学一下吧,我们不一定要过四六级,但是一定要有读懂文档的能力。
我就不详细说明注册过程了,只提前你,一定要想一个简单易记的英语名。

安装nodejs

nodejs下载网址: http://nodejs.cn/download/
下载对应你电脑的版本,然后打开安装软件,下一步下一步……。
必要的时候百度吧,很容易就能百度得到的事情我就不重复了。

安装git

git的下载地址: https://git-scm.com/downloads
我说一下我对git的理解,不知道对不对,你们就看着玩好了。我们看电视电影的时候可能会看到,一些黑客入侵别人电脑的时候就是在一个黑窗口里不断打代码。啪啪啪……地敲。好帅好酷。那么git也差不多是这个意思,在黑窗口里操作电脑。
安装也是很简单,同理,易到麻烦请百度。

博客的服务器在哪呢

半个小时后,我们就可以在浏览器中输入我们的域名然后看到我们的博客了,激动不?也许不用半个小时。那问题又来了,我们的博客是放在哪里的?我们关掉电脑后别人还能浏览我们的博客吗?可以的。
github有给我们提供了免费的服务器,所以我们购买域名的时候,只购买域名就行了,不用购买服务器,很便宜。
登陆github,创建一个仓库,命名为你的用户名.github.io,例如我的用户名是allen151,那仓库名就是allen151.github.io,如下图:
""
""
然后就创建仓库即可,不用过多地设置。创建完成后点击README,随便添加一些内容,然后保存。如下图:
""
在本仓库下,选择Settings选项,找到GitHub Page,选择master bransh,然后save。自动刷新后,回到GitHub Page处,你就可以发现多出来了一个网址https://你的用户名.github.io。操作如下图:
""
在浏览器输入这个网站就可以看到你刚才在README文件里写的内容啦。你的博客就放在这个仓库。如果你已经买了域名,那么现在就可以把github提供给你的二级域名换成你购买的域名,这一步我后面再说,如果你等不及了可以直接到下文找哦!不要着急嘛!!

安装Hexo

在你认为适合的盘下创建一个hexo文件夹,用来存放博客的文件夹。我的是D://hexo,在该文件夹打开命令行窗口,输入命令: npm install hexo-cli -g

安装hexo模块,要等一两份中,在此过程可能会警告,是正常情况。
然后再输入:

1
npm install hexo --save

执行完成后,我们来检测一下安装是否成功。输入hexo -v
如果输出一些版本信息,则证明安装成功

配置Hexo

初步使用hexo需要配置一些信息。
初始化:hexo init
自动安装所需要的插件hexi install
所需要的插件都安装完全了,那么我们就可以开始布署本地博客了,布署完本地博客后再把本地的博客与github服务器的仓库关联起来,我们就可以用二级域名访问我们的博客了。
布署hexo g
会输出一些信息,等输出完了,再输入hexo s
最后提示INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
布署成功了,在浏览器输入http://localhost:4000/就可以看到hexo的首页了。
本地博客配置完成,那么接下来就是要把本地的博客放到网络上。

怎样将Hexo与github page 联系起来

  • 配置git的个人信息:
    让git能找到你的仓库
    1
    2
    git config --global user.name "allen151"
    git config --global user.email "1574165902@qq.com"

检查是否已经生成SSH key,输入cd ~/.ssh,接着输入ls,意思是列出.ssh文件下的文件,看是否存在 id_isa 和 id_isa.pub 文件,如果存在的话,证明已经存在 SSH key了,不用再执行生成密钥了。

  • 生成密钥
    1
    2
    # 这里我的邮箱是 1574165902@qq.com 替换成你自己的邮箱
    ssh-keygen -t rsa -C "1574165902@qq.com"

连续3个回车。如果不需要密码的话。
最后得到了两个文件:id_rsa和id_rsa.pub。

默认的存储路径是:

1
C:\Users\Administrator\.ssh

  • 添加密钥到ssh-agent

确保 ssh-agent 是可用的。ssh-agent是一种控制用来保存公钥身份验证所使用的私钥的程序,其实ssh-agent就是一个密钥管理器,运行ssh-agent以后,使用ssh-add将私钥交给ssh-agent保管,其他程序需要身份验证的时候可以将验证申请交给ssh-agent来完成整个认证过程。

1
2
# 在本地启用SSH代理
eval "$(ssh-agent -s)"

添加生成的 SSH key 到 ssh-agent。ssh-add ~/.ssh/id_rsa
完成本地的密钥操作后,需要把密钥交给github管理。

  • 登陆Github, 添加 ssh。
    默认情况下,是以下这个路径 C:\Users\Administrator\.ssh
    找到id_rsa.pub文件,把里面的内容全部复制到github上,具体哪个位置,继续住下看。
    在github主页点击你的头像,去到设置选项,找到SSH and GPG keys,点击,在右边发现有一个new SSH key按钮,点击。然后把刚才复制的内容粘贴到key上,如下图:

    验证是否成功,在Git Bash Here中输入ssh -T git@github.com
    如果你能看到以下信息,则说明成功了。只要hi后面是你的用户名就OK。

    1
    Hi allen151! You’ve successfully authenticated, but GitHub does not provide shell access.
  • 配置Deployment

同样在_config.yml文件中,找到Deployment,然后按照如下修改:

1
2
3
4
deploy:
type: git
repo: git@github.com:yourname/yourname.github.io.git
branch: master

比如我的仓库的地址是git@github.com:allen151/allen151.github.io.git,所以配置如下

1
2
3
4
deploy:
type: git
repo: git@github.com:allen151/allen151.github.io.git
branch: master


搭建完成博客后,我们就可以开始写博客了。

主题个性化设置网站: http://theme-next.iissnan.com/
直接去那里看就行了。最主要是明白项目里的每一个文件夹的作用,明白之后都是很简单的代码,随便改。
项目各个路径说明:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
├── .github #git信息
├── languages #多语言
| ├── default.yml #默认语言
| └── zh-Hans.yml #简体中文
| └── zh-tw.yml #繁体中文
├── layout #布局,根目录下的*.ejs文件是对主页,分页,存档等的控制
| ├── _custom #可以自己修改的模板,覆盖原有模板
| | ├── _header.swig #头部样式
| | ├── _sidebar.swig #侧边栏样式
| ├── _macro #可以自己修改的模板,覆盖原有模板
| | ├── post.swig #文章模板
| | ├── reward.swig #打赏模板
| | ├── sidebar.swig #侧边栏模板
| ├── _partial #局部的布局
| | ├── head #头部模板
| | ├── search #搜索模板
| | ├── share #分享模板
| ├── _script #局部的布局
| ├── _third-party #第三方模板
| ├── _layout.swig #主页面模板
| ├── index.swig #主页面模板
| ├── page #页面模板
| └── tag.swig #tag模板
├── scripts #script源码
| ├── tags #tags的script源码
| ├── marge.js #页面模板
├── source #源码
| ├── css #css源码
| | ├── _common #*.styl基础css
| | ├── _custom #*.styl局部css
| | └── _mixins #mixins的css
| ├── fonts #字体
| ├── images #图片
| ├── uploads #添加的文件
| └── js #javascript源代码
├── _config.yml #主题配置文件
└── README.md #用GitHub的都知道

  • 新建一篇博客,执行下面的命令:
    1
    hexo new post "article title"

这条命令会在你的博客目录的 source/_posts 下生成一个 article-title.md 的文件,用编辑器打开就可以编辑文章了。文章编辑好之后,运行生成、部署命令:

1
2
hexo g // 生成
hexo d // 部署

部署后就可以在网站上看到效果,但是,制作过程可能只想在本地调试,那么就要用到下面的命令了。

  • 开启本地的服务
    1
    2
    3
    4
    5
    6
    7
    8
    hexo s -debug
    ```
    写博客过程先本地预览时用到。
    #### 新建一个菜单
    菜单就是你打开网站时,所看见的首页、分类、关于之类的那个列表。
    新建一上图片菜单为例,
    ```bash
    hexo new page "photo"

此时在source目录下就能找到一个photo文件夹了,默认使用index.md文件存放内容。此时我们还要去主题配置文件中添加photo的索引路径,主题默认根目录是D:\hexo\source,根目录下已经创建了photo文件夹了,在D:\hexo\themes\next\_config.yml文件中的menu列表下添加photo: /photo,添加索引。
在同一个文件下的menu_icons列表下添加图片photo: image,然后再在languages文件夹对应的语言下增加文字photo: 相册。预览。

试验引用

我是个试验品

我是个试验品

我是个试验品

我是个试验品

我是个试验品

我是个试验品