搭建hexo+GitHub个人博客及遇到的问题
在假期期间,我尝试搭建自己的博客,网上有各种视频教程,我是跟着学长给我推荐的B站上教程一步一步做的,我也看了学长之前搭建时的笔记。我在搭建时也遇到了问题,然后我都记录了下来,做个笔记吧。
(1)安装node.js
到官网去下载12.14.1 LTS
版本的,下载好之后,在文件中打开Node.js Setup
。一直选择next到结束。这里提示一下,最好不要改路径,一直点next就行,如果自己改路径的话,有可能会出错,所以保险起见还是不要更改它的默认路径了。安装好之后打开cmd输入node -v
C:\Users\18101>node -v
v12.14.1
好了,这就算安装成功了。
创建一个github账户
进入github官网
把username,email,password,填写过后注册就可以了,Username自己随便设置,能记住就行,一般都是用英文字母。账户创建完成后,点Create a new repository
创建一个新仓库。
Repository name格式推荐写成username.github.io
例如zxcv0221.github.io
记得把Initialize this repository with a README前面的框点上对勾。然后点下面的绿色框Create repository
就创建成功了。
然后在github创建第一个新的项目,根据网上大佬的视频教程,我跟着做,前面没什么错误,但是后面最后一步出错了,页面是下面的图:
项目创建好了就是上面那个样子,我这一步还是没错的,但是我跟着教程上所说的“复制我的链接”也就是用户名.github.io
我看到视频中的是直接粘到浏览器上打开,但是我跟着做却打不开网页,
出错了,我看学长的博客里写到这一点了,他当时遇到的问题也是打不开网页,他那个情况估计是网站有延迟,所以解决办法就是等,他的网页在第二天就可以打开了。但我的这个又不一样了,我同样是尝试他的办法,结果还是不行,我就把那个新建的库删了重新建,如此六遍,都没有得到我想要的结果,然后就去百度,各种浏览器都试试,还是没成功,然后我加了一个群去问群里的大佬,过程是非常曲折,好在最后解决了,其实也很简单,就是在链接的前面加上https://
就可以打开了。
综上有三种情况,1.慢慢等,2.删了重建,所有步骤再来一遍。3.就是在前面加https://
。
这个答案虽然简单,但对于像我这样的小白来说,也可能会考虑不到,所以就写了出来。
删库方法
这个过程可能需要多次尝试,这样就避免不了删库,但是我不会删库,果然伟大的度娘是可以解决任何“疑难杂症”的。
第一步,点击Settings
第二步,向下滑到最底端找到Delete the repository,点击就可以删除这个库了。
安装git for windows
仍然是去官网下载安装包,下载过程可能会非常慢,耐心等待。下载完毕后安装,老规矩就别改路径了,避免不必要的麻烦,记住千万不要一直点next,先看看,安装过程中有一步是,Use windows default console window
这个要选上。其他倒没什么,只需next 就行了。安装完毕后打开cmd输入git
C:\Users\18101>git
usage: git [--version] [--help] [-C <path>] [-c <name>=<value>]
[--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]
[-p | --paginate | -P | --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.
会出现这些,这就代表已经安装完了。
安装插件
由于后面要用到一些插件,所以干脆就提前安装吧,这里需要安装的插件是hexo-deployer-git
打开cmd输入npm install hexo-deployer-git --save
就可以安装了。
配置github ssh
在你下载git for Windows的文件夹中找到并打开git-base.exe,在命令行输入ssh-keygen -t rsa -C "你的邮箱"
然后一直按回车。
然后打开GitHub官网,点击头像,点击Settings,再点击SSH and GOG keys,点击NEW SSH KEY ,title的名字就是你的用户名,然后key的话,根据路径C:\Users\用户名\.ssh
,用记事本打开id_rsa.pub
这个文件,把里面的代码复制并粘贴到key上就🆗了。
本地安装hexo
本地安装hexo前,应该先创建一个新文件夹,这个文件夹建议设在D盘下,因为搭建一次可能不成功,需要删除重新来,文件名字可以随便起。然后打开cmd,输入
C:\Users\18101>D:
D:\>cd blog
D:\blog>
这样就就进入到这个文件夹里了,再输入一条这样的命令npm install hexo-cil -g
就可以安装hexo了,安装好之后再输入命令hexo init 博客昵称
,等待加载完毕后,输入cd 博客名
,再进入你的文件夹。输入npm install
好了,现在就静等安装就🆗了。
安装好了可以运行一下试试,再输入hexo s
看看有没有出现
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
然后,复制这个链接在浏览器中打开,如果有画面,就证明已经成功了。(因为我当时做的时候没有截图,不过只要是出现画面了,就是成功了。)
文本编译器下载
一个好的文本编译器是很重要的,编译器有好多种,大家可以根据自己的喜好来选择。我用的是sublime ,下载的话,去官网下载就行了,过程可能有点慢。
下载好之后,打开hexo 所在的文件,把它直接拖进sublime里面,像这样。
现在,找到/* _config.yml
,打开这个文件,往下滑到最底端,
根据自己的个人信息改成这个格式就可以了,我的是已经改过的。
还有一处是需要改的,
16|url: http://zxcv0221.github.io
改完之后记得保存。
打开cmd输入hexo g
回车,等到可以再次输入时,输入hexo d
,到这里上面下载的插件就起到作用了。这个过程比较慢,耐心等待。
然后再输入
git config --global user.email "你的邮件"
git config --global user.name "你的用户名"
再输入 hexo d
就会弹出一个登录界面,输入个人的用户名和密码就可以了。
这里一般情况下就算完成了,emmmmm,进行顺利的话就可以进入自己的博客了。
但是我的跟这个不一样,我的输入hexo d
后是这样的:
上面说fatal:unable to auto-detect email address
然后我就上百度查,解决方法如下:
1.打开“此电脑”——>点击“查看”——>勾选“隐藏的文件名”
2.进入我们博客目录的“.deploy_git.git”子目录,找到config文件。
3.打开config文件,添加下面的内容
1|[user]
2| email=你的邮箱
3| name=Github用户名
保存即可,到这里问题就解决了。
hexo d后出现 ERROR Deployer not found: git
$ hexo d
ERROR Deployer not found: git
只需输入
npm install --save hexo-deployer-git
即可解决。
更换博客主题
刚建好的hexo博客主题是默认的,我们需要修改这个主题,hexo有很多主题,可以挑一个自己喜欢的。可以点击这里挑hexo主题
以Annie主题为例
1.下载主题
找到hexo文件所在的位置,找到themes,右键单击,选择在Git Bash Here
打开。
然后输入git clone 主题链接
可以下载主题,我这里就是
$ git clone https://github.com/Sariay/hexo-theme-Annie.git
等待安装。然后可以查看一下
$ ls
hexo-theme-Annie/ landscape/
3.然后修改你博客根目录下的_config.yml文件里的theme配置来更换使用的主题
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-Annie
注意格式,该空格的地方记得要空格。
4.本地预览
hexo clean
hexo g
hexo s
会出现一个链接(端口号一般是4000),复制链接到浏览器中打开就可以看到更改后的主题了。
5.上传主题
$ hexo d
INFO Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...
INFO Copying files from extend dirs...
warning: LF will be replaced by CRLF in 2020/02/01/hello-world/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/2020/02/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/2020/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in css/Annie.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in css/comment.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in js/leancloud-count.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in js/main.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in js/search.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/chinese/chinese.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/clipboard/clipboard.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/comment/valine.min.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/fancybox/jquery.fancybox.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/fancybox/jquery.fancybox.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/gallerypage/natural-gallery.full.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/gallerypage/natural-gallery.full.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/gallerypage/natural.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/imagelazyloader/yall.min.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/imageloaded/imagesloaded.pkgd.min.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/jquery/jquery.min.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/leancloud/av-min.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/motto/motto.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/nicescroll/jquery.nicescroll.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/resizediv/resizediv.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/search/ziploader.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in plugin/toc/katelog.min.js.
The file will have its original line endings in your working directory
[master 20686db] Site updated: 2020-02-01 17:40:09
70 files changed, 25502 insertions(+), 5825 deletions(-)
rewrite 2020/02/01/hello-world/index.html (70%)
rewrite archives/2020/02/index.html (94%)
rewrite archives/2020/index.html (94%)
rewrite archives/index.html (94%)
create mode 100644 css/Annie.css
create mode 100644 css/comment.css
delete mode 100644 css/fonts/FontAwesome.otf
delete mode 100644 css/fonts/fontawesome-webfont.eot
delete mode 100644 css/fonts/fontawesome-webfont.svg
delete mode 100644 css/fonts/fontawesome-webfont.ttf
delete mode 100644 css/fonts/fontawesome-webfont.woff
create mode 100644 css/fonts/icomoon.eot
create mode 100644 css/fonts/icomoon.svg
create mode 100644 css/fonts/icomoon.ttf
create mode 100644 css/fonts/icomoon.woff
delete mode 100644 css/images/banner.jpg
delete mode 100644 css/style.css
delete mode 100644 fancybox/blank.gif
delete mode 100644 fancybox/fancybox_loading.gif
delete mode 100644 fancybox/fancybox_loading@2x.gif
delete mode 100644 fancybox/fancybox_overlay.png
delete mode 100644 fancybox/fancybox_sprite.png
delete mode 100644 fancybox/fancybox_sprite@2x.png
delete mode 100644 fancybox/helpers/fancybox_buttons.png
delete mode 100644 fancybox/helpers/jquery.fancybox-buttons.css
delete mode 100644 fancybox/helpers/jquery.fancybox-buttons.js
delete mode 100644 fancybox/helpers/jquery.fancybox-media.js
delete mode 100644 fancybox/helpers/jquery.fancybox-thumbs.css
delete mode 100644 fancybox/helpers/jquery.fancybox-thumbs.js
delete mode 100644 fancybox/jquery.fancybox.css
delete mode 100644 fancybox/jquery.fancybox.js
delete mode 100644 fancybox/jquery.fancybox.pack.js
create mode 100644 img/Annie_qq_qrcode.jpg
create mode 100644 img/cart_cover.jpg
create mode 100644 img/favicon.ico
create mode 100644 img/header-bg.jpg
create mode 100644 img/lazy.gif
create mode 100644 img/logo.png
create mode 100644 img/quote/danger.svg
create mode 100644 img/quote/info.svg
create mode 100644 img/quote/quote-left.svg
create mode 100644 img/quote/success.svg
create mode 100644 img/quote/warning.svg
rewrite index.html (96%)
create mode 100644 js/leancloud-count.js
create mode 100644 js/main.js
delete mode 100644 js/script.js
create mode 100644 js/search.js
create mode 100644 plugin/chinese/chinese.js
create mode 100644 plugin/clipboard/clipboard.js
create mode 100644 plugin/comment/valine.min.js
create mode 100644 plugin/fancybox/jquery.fancybox.css
create mode 100644 plugin/fancybox/jquery.fancybox.js
create mode 100644 plugin/gallerypage/data.json
create mode 100644 plugin/gallerypage/images/default-skin.png
create mode 100644 plugin/gallerypage/images/default-skin.svg
create mode 100644 plugin/gallerypage/images/preloader.gif
create mode 100644 plugin/gallerypage/natural-gallery.full.css
create mode 100644 plugin/gallerypage/natural-gallery.full.js
create mode 100644 plugin/gallerypage/natural.css
create mode 100644 plugin/imagelazyloader/yall.min.js
create mode 100644 plugin/imageloaded/imagesloaded.pkgd.min.js
create mode 100644 plugin/jquery/jquery.min.js
create mode 100644 plugin/leancloud/av-min.js
create mode 100644 plugin/love/love.js
create mode 100644 plugin/motto/motto.js
create mode 100644 plugin/nicescroll/jquery.nicescroll.js
create mode 100644 plugin/resizediv/resizediv.js
create mode 100644 plugin/search/ziploader.js
create mode 100644 plugin/toc/katelog.min.js
Enumerating objects: 94, done.
Counting objects: 100% (94/94), done.
Delta compression using up to 12 threads
Compressing objects: 100% (61/61), done.
Writing objects: 100% (78/78), 1.62 MiB | 236.00 KiB/s, done.
Total 78 (delta 5), reused 0 (delta 0)
remote: Resolving deltas: 100% (5/5), done.
To https://github.com/zxcv0221/zxcv0221.github.io.git
d8a3c48..20686db HEAD -> master
Branch 'master' set up to track remote branch 'master' from 'https://github.com/zxcv0221/zxcv0221.github.io.git'.
[32mINFO [39m Deploy done: [35mgit[39m
出现这样的界面就算成功了。
但是我的恰好不是这样的:
我的输入hexo g
和hexo
后是这样的,
看着网上的教程人家改主题也没这么费劲啊~~,为什么问题总找我,不过无所不知的度娘给了我解决办法,
问题:如果出现WARN no layout:index.html
?><?
解决办法:只要把theme下的文件名改为主题名就行。我这里把它改成了hexo-theme-Annie
.
如果这些都做了,还是没有变化,还有一个办法,那就是把theme目录下的那个包含主题的文件删了重新下载。
问题终于解决了,呼~~,挺费劲的。也不枉我昨天熬到凌晨两点多,很高兴,终于就要完成了,
这次学习学到很多,最重要的就是要不断尝试,不能气馁。虽然过程中心情非常急,但是,做完之后会有一种成就感。