搭建属于自己的博客

Record my learning process of Building Blogs.

hexo

字数统计: 2.5k阅读时长: 10 min

 2019/03/12   Share

hexo+githup搭建属于自己的博客

第一次搭建博客，遇到不少坑。CSDN、bing、谷歌、百度上都有大神的博客教授如何一步一步搭建属于自己的博客。不过我毕竟属于小白，文字有时给我的感受不是那么的直观，所以我是在B站看视频一步一步做的.话说他们的视频都写无坑视频。。。我却遇到了。。。很多坑，但觉得也很有趣，所以记录一下我的搭建过程。

安装node.js

在这里插入图片描述
官网链接
选择10.15.3LTS进行下载。

我是一路next,我开始搭的时候不想放入C盘，但后来发现npm命令不能用😂，才发现还要改路径，很麻烦。所以就一路next放进C盘中去。安装好后，打开cmd

1 2	C:\Users\用户名>node -v v10.15.3

即证明已经安装好了。

2 创建github账户

github官网
username不要起中文名，起一个英语名字，也不要太过于长，否则都后面会很麻烦。
创建完成后点击start a project,创建一个仓库。
Repository name 要写成这样的格式username.github.io,例如我用户名创建时bealright.github.io,然后将Initialize this repository with a README前面的对勾打上。
点击create repository就创建好了。
接下你可以测试一下，点击create new file.,输入index.html，输入<h1> Hello Github </h1>.然后提交。复制你的链接用户名.github.io，然后转到该页面上去。如果显示出Hello Github，证明你创建的已经成功。如果显示404（所请求的页面不存在或已被删除!），不要着急，我当时被困在这里，毕竟刚开始搭，什么都不懂。在这里一直查怎么回事，删除仓库，重新建库。。。😂😂，到最后我明白了一个真理。。。时间skr伟大的作者，他必将写出最完美的结局

解决方法：问题出在Github服务器上，估计是翻墙什么的缘故吧，会卡一些，你创建的文件不会立即上传过去，要做的就是好好睡一觉明天在搭（因为我是晚上搭的😂），所以遇到这个问题不要着急。

3 安装git for windows

在这里插入图片描述
git for windows官网
因为git for windows是输入外国网站，你必须翻墙去下载，但是速度会特别慢，所以推荐去百度网盘什么的下载，会快一些。我当时找了一个很不错的网址，各种版本的都有。下载地址
安装时一路next,我直接放在的C盘中，因为如果出现路径问题会很麻烦，你还得去设置环境变量。在安装的时候，其中有一步要选择Use windows default console window。安装好后打开cmd。输入git 命令。

C:\Users\赵志豪>git
usage: git [--version] [--help] [-C <path>] [-c name=value]
           [--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]
           [-p | --paginate | --no-pager] [--no-replace-objects] [--bare]
           [--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>]
           <command> [<args>]

These are common Git commands used in various situations:

start a working area (see also: git help tutorial)
   clone      Clone a repository into a new directory
   init       Create an empty Git repository or reinitialize an existing one

work on the current change (see also: git help everyday)
   add        Add file contents to the index
   mv         Move or rename a file, a directory, or a symlink
   reset      Reset current HEAD to the specified state
   rm         Remove files from the working tree and from the index

examine the history and state (see also: git help revisions)
   bisect     Use binary search to find the commit that introduced a bug
   grep       Print lines matching a pattern
   log        Show commit logs
   show       Show various types of objects
   status     Show the working tree status

grow, mark and tweak your common history
   branch     List, create, or delete branches
   checkout   Switch branches or restore working tree files
   commit     Record changes to the repository
   diff       Show changes between commits, commit and working tree, etc
   merge      Join two or more development histories together
   rebase     Reapply commits on top of another base tip
   tag        Create, list, delete or verify a tag object signed with GPG

collaborate (see also: git help workflows)
   fetch      Download objects and refs from another repository
   pull       Fetch from and integrate with another repository or a local branch
   push       Update remote refs along with associated objects

'git help -a' and 'git help -g' list available subcommands and some
concept guides. See 'git help <command>' or 'git help <concept>'
to read about a specific subcommand or concept.

出现一堆看不懂的就证明已经安装成功了。

4 配置githubSSH

找到下载git fow windows的目录，打开git-bash.exe 在这里插入图片描述
在命令行输入$ ssh-keygen -t rsa -C "你的邮箱"
输入之后，一直按回车就🆗了。等到出现一个长方形框之后，就已经配置好了。
然后打开GitHub官网，点击头像，点击Settings,再点击SSH and GOG keys,点击NEW SSH KEY ,这时title就起名为你注册的用户名，然后key需要你找到C:\Users\用户名\.ssh这个目录，注意这里用记事本打开id_rsa.pub,复制里面的代码，粘贴到key上即可。这样就配置好了。

5 hexo本地使用

进入hexo官网在这里插入图片描述
注意这是安装hexo不要在安装到c盘了，因为c盘系统文件太多，不敢乱删，而且找hexo所在文件也不太好找到。
我是在D盘建了一个blog文件夹，将hexo安装在这里面。接下来打开cmd

C:\Users\用户名>D:

D:\>cd blog

D:\blog>npm install hexo-cil -g

首先你得先进入对应的目录，然后输入npm install hexo-cil -g命令即可安装hexo.
在这里插入图片描述
接下来照着这些命令往下走，第二条命令作用是初始化。
最好第二条命令 hexo init 博客名（注册的名字），这样好区分一点。

1	INFO start 博客名 with Hexo!

显示出这个时，初始化已完成。

1 2	cd 博客名 npm install

待安装好后，本地运行一下，看是否成功。
输入

hexo  s

显示出

1
2
3

D:\blog\bealright>hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

打开http://localhost:4000/，如果出现这个画面，恭喜创建成功。![在这里插入图片描述](https://github.com/bealright/bealright.github.io/blob/master/photo/7.png?raw=true)
因为换了主题的缘故，所以不再是hexo的官方主题，不过只要出现画面就成功了。

六安装sublime

在这里插入图片描述
sublime官网
下载这个软件有很大用处，无需在记事本了修改配置文件，直接在sublime里修改更方便一些。不过下载这个也要翻墙，所以推荐百度网盘下载。
下载好后，找到你安装hexo的目录直接拖进sublime里。就会显示出类似这个的图片。

在这里插入图片描述

七 hexo发布到github上

这是最后一步了，看似是胜利女神在向你招手，但你永远也不会知道前面是结束还是会继续掉坑。
打开sublime,找到这个在这里插入图片描述
然后将最下面的代码改为这样
注意： repo里的bealright是我的用户名，改成注册时的用户名就好了。还有一处地方也需要改

照这这个格式，把自己的用户名更改了即可（bealright是我自己的用户名）。
再打开cmd,输入

hexo g
INFO  Start processing
INFO  Files loaded in 124 ms
INFO  Generated: archives/2019/index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2019/03/index.html
INFO  Generated: index.html
INFO  Generated: 2019/03/16/cmd中操作数据库的那些常见命令/index.html
INFO  5 files generated in 254 ms

会出现类似的东西（我的创建完成所以会不一样），不要管他。
继续输入

hexo d

此时会出现

1	ERROR Deployer not found git

原因在于还少了一个插件
到官网下载插件进入hexo文档官网在这里插入图片描述
hexo文档官网

将命令输入到cmd中即可安装。会有一点慢，等待一会就好。
安装好之后，输入

hexo d

这一步就要看你运气了，我在这里卡了一个晚上 + 一个下午😂。
如果出现这个的话
在这里插入图片描述
恭喜你，运气很好（哈哈），接下只需要输入

git  config --global user.email "你的邮件"
回车
git  config --global user.name "你的用户名"
再次输入 hexo d
会弹出这样的窗口

在这里插入图片描述
输入即可进入你的博客了。（好幸运呀）
但我遇到的是这样的😤

马上就成功了，前面却是这个，好让人心急。不过不要着急，互联网这么强大，大佬那么多，总会有解决方法。冷静下来进行分析。咦，发现问题了。在这里插入图片描述
原来是git命令不能用，查了很多文章，我找到了二个解决方法。一：把git for windows 给卸载了重新安装，上文说之所以安装git for windows一路next 不要换路径原因就在这。还有一个就是在这里面输入
这里面自带git命令，

1
2
3

重新输入
hexo g
hexo d

不过让人郁闷的是😱这个git命令解决后。。。还有问题。。。（我要郁闷死😭）同寝室人一个坑没掉过，我一路跌坑。请看新问题。。。
在这里插入图片描述
我。。。不会吧，又出现这个问题。。。
怎么办，都到最后一步了。不放弃继续查，bing\谷歌\百度各种查，问学长学姐，加hexo群询问。。。😥
不过在耐心快被磨完时，我找到解决方案了。

这就是解决方案。当时也不太理解，不过得去尝试，不去尝试怎么知道行不行。
首先将在这里插入图片描述
删除
新建一个文件夹
然后下载

把下载的内容放在你新建的文件夹里面。
再次运行

1 2	hexo g hexo d

当时的心情是快点好吧，大哥求你了😂
结果奇迹出现了
只不过我的和其他人登陆有点不一样。。。
在这里插入图片描述
输入的账号，密码全对，结果。。。

崩溃的边缘。。。
我实在无语，然后输入了自己的用户名bealright（没事的）。。。我遇到的都是事😂
突然弹出一个窗口

输入密码后，成功了。。。

这个过程完成后，感悟真的很多。也许前方无数的bug\error在等着我，但是只要保持耐心，不断努力，最终会解决他们的。共勉一句我特别喜欢的英语名言
No attempt, no success
没有尝试，没有成功

Next Post

CSS学习总结

CATALOG

1. hexo+githup搭建属于自己的博客

