前言
关于个人博客的搭建过程,个人在这里面踩了很多的坑,初次搭建的不算成功,还好有团队的教学与学长的经验相助,在努力下搭建了我的个人博客。在此总结我在搭建的一些过程。
正文
本次过程只适用于windows的用户。用于个人学习记录。
搭建流程
一、Nodejs的安装
二、Git安装
三、GitHub创建个人仓库
四、配置SSH key
五、Hexo安装
六、发布网站
七、更改主题
一、Nodejs的安装
Hexo基于Node.js的,搭建博客网站首先需要安装Node.js环境。
下载地址:http:\nodejs.cn\download
测试安装:命令行使用node -v 、npm -v,查看显示版本号即成功。
打开cmd命令行,成功界面如下
二、Git安装
网站在本地搭建好了,需要使用Git同步到GitHub上。
首先访问https:\git-scm.com\ 下载完毕后进入安装界面进行安装。
正常安装后使用git –version的命令来测试git是否安装成功。
到这里git就已经安装成功了!
三、GitHub创建个人仓库
1.首先登录https:\github.com 进行账户注册和新建项目。此处由于之前创建过所以无法创建。在这里需要注意目必须要遵守格式:你的账户名.github.io。并且需要勾选Initialize this repository with a README。
在建好的项目右侧有个settings按钮,点击它,向下拉到GitHub Pages,你会看到那边有个网址,访问它,你会现该项目已经被部署到网络上,能够通过外网来访问它。如下图所示:
四、配置SSH key
为了要拥有你的github权限,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。使用$ cd ~. ssh #检查本机已存在的ssh密钥。
如果提示:No such file or directory 说明你是第一次使用git。然后连续3次回车,最终会生成一个文件在用户目录下,打开用户目录,找到.ssh\id_rsa.pub文件,记事本打开并复制里面的内容,打开你的github主页,进入个人设置 -> SSH and GPG keys -> New SSH key:
之后进行测试是否成功!
如果提示Are you sure you want to continue connecting (yes\no)?,输入yes,然后会看到:
看到这个信息说明SSH已配置成功!
五、Hexo安装
1.首先在自己认为合适的地方创个文件夹,个人是在D盘建了一个hexo然后再建立了blog文件夹。也可以直接建立一个blog文件然后使用DOS命令进入到该文件夹里面。然后输入输入npm install hexo -g,开始安装Hexo.
![Image] (hello-world\hexo01.png)
完成后,继续输入命令 cnpm install -g hexo-cli
![Image] (hello-world\hexo02.png)
等待完成,再输入命令 cnpm install hexo –save
至此Hexo安装完成,使用查看版本命令 hexo -v 检查是否正常安装。
六、发布网站
1、本地启动
创建一个新文件夹(我的是在E盘创建的Blog),进入该文件夹,右键Git Bash Here,输入 hexo init 命令。
接下来输入 hexo s -g 命令启动,启动后浏览器访问localhost:4000查看博客效果。
2、部署到Github
本地成功后下面就要部署到Git了,打开_config.yml进行配置,如下图,复制你的仓库地址给repo参数
在Git命令窗口输入 npm install hexo-deployer-git –save 安装hexo-deployer-git自动部署发布工具,等待安装完成,输入 (hexo clean) (hexo g) (hexo d) 命令发布到Github,这里注意第一次发布的话会需要输入你的Github账号跟密码,等待出现下图的信息就说明发布成功了,在浏览器输入yourname.github.io就可以看到你的博客了。
七、更改主题
部署完毕后,可以根据自己的喜好更改自己的主题在hexo的官网中有主题选项然后进行配置更改找到自己喜欢的网站主题。完成配置就好了。
对于上传图片的问题解决
前一段搭建好的个人博客 图片怎么传也传不上去,把图片放在github的库中也没有操作好 ,甚至找了一个破解版的MarkdownPad 2 插入图片也没有成功,对此 差点自闭。 后来在学长的指导下得出了如何简单的上传图片。放下如下
1、cd到博客根目录下 查看_config.yml文件
查找 post_asset_folder
字段确定post_asset_folder
设置为true -> post_asset_folder:true
2、当你设置 post_asset_folder 参数后,在建立文件时,Hexo 会自动建立一个与文章同名的文件夹,你可以把与该文章相关的所有资源都放到此文件夹内,这样就可以更方便的使用资源。
3、到博客的根目录下执行 npm install https://github.com/CodeFalling/hexo-asset-image –save 命令来进行插件的安装。
4、然后创建一文章 hexo new “test” 然后查看博客的 ../source/_posts 目录下的文件,会看到存在一个test 文件夹 和 test.md 文件
5、将需要显示在test.md文件中的图片放到上面命令生成的test文件夹中
在test.md文件中使用命令显示文件,其中中括号的内容会是你在md文件中图片的名字,小括号中的地址的格式为 文件夹名/图片名,例如 test/test.png
在此终于解决了图片上传的问题,由衷感谢学长的帮助。
个人博客,希望能够帮助到一些人,小白第一次发博,还请大佬轻喷。