作为一个程序员,平常难免会遇到一些奇怪的问题要解决,或者因为业务需要要学习一些新技能。而能把这些经验整理并分享出来的载体,就属于个人博客了。(其实就是为了那种满足感)
第一步:环境搭建
1、安装node.js
安装node会自带npm,可以用来安装博客的一些插件,且node环境现在已经是前端开发必不可少的一部分了。
去Node.js官网选择对应的安装包,然后无脑next就安装完成了。(LTS:长期稳定版本;CURRENT:最新版本)
安装完成后打开命令行,输入以下命令检查是否安装成功
1、 node -v
2、 npm -v
如果出现了版本号就是安装成功了
2、安装git
Windows:
直接去官网下载并安装
Mac:
1、通过homebrew安装Git
- 如果未安装homebrew,先安装homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- 安装git
brew install git
2、通过Xcode安装
直接从AppStore安装Xcode,Xcode集成了Git,不过默认没有安装,你需要运行Xcode,选择菜单“Xcode”->“Preferences”,在弹出窗口中找到“Downloads”,选择“Command Line Tools”,点“Install”就可以完成安装了。
第二步:安装Hexo
当git和node都装好后,就可以开始初始化我们的Hexo项目了(git要等到部署博客的时候才使用到)
1、全局安装hexo-cli
npm install hexo-cli -g
安装完毕后继续使用hexo -v
查看版本确认是否安装成功
2、初始化博客项目
进入到你的桌面,使用命令
hexo init Blog
(Blog是文件名,随便取什么都行)。初始化完成后会得到一个Blog
文件夹,cd
进入这个文件夹,使用npm install
安装依赖。依赖安装成功后就可以使用hexo server
或者npm run server
把博客项目跑起来了
当看到上图的信息时,按照最后一行的提示,打开浏览器进入http://localhost:4000
就能看到生成的博客了,默认是下面这样
目前默认的样子肯定不是我们想要的,接着就可以根据自己的需求去修改博客的配置了。
如果不喜欢默认主题,可以看看官方网站上的提供的主题,或者去github上搜索hexo theme
关键字搜索hexo
的博客主题并使用。(这里推荐一下自己使用的博客主题 hexo-theme-matery,个人觉得很不错)
第三步:部署博客
Hexo提供了一个名为hexo-deployer-git
的插件,可以一键把Hexo项目部署到github上。(这一步只用最简单的方法部署博客,如果不能满足需求可以自行搜索其他方法,这里就不放出其他方法的链接了,见谅)
1、没有github账号的话创建一个github账号
上面2个方法也是本人自己网上找的发布时间比较新的文章,不保证能用,但几乎所有的方法都是围绕的配置host实现。所以如果配置了host还是进不去github,那就是host的配置有问题 注: 配置完host之后最好关闭浏览器重新打开,或者强刷一下浏览器再尝试进入github
2、新建仓库
部署博客博客到仓库使用的是github pages。所以我们要先建立一个仓库用来放置我们的博客。
当github账号新建好并登录后,页面左边会有一个Repositories
字样,点击旁边的new按钮新建仓库。创建仓库的名字是<你的 GitHub 用户名>.github.io
。将来就可以通过这个名字访问到你的博客网站了。
3、生成ssh
这一步就不多说了,要想把代码成功推送到github上,这一步就不能漏。
首先打开命令行工具,输入以下命令:
// 配置用户名
1、git config --global user.uname '你的用户名'
// 配置邮箱
2、git config --global user.email '你的邮箱'
// 生成ssh
3、ssh-keygen -t rsa -C '你的邮箱'
碰到要确认的时候就按y,其他的一直回车,一般这样操作后就完成了。当告诉你ssh生成成功后,你电脑上会生成一个.ssh
的文件夹,内容如下
其中,id_rsa.pub
就是我们所要的,把这个文件里的内容复制放到github上(点开github上的头像,选择Settings
,进入SSH and GPG keys
这一项,点击New SSH key
新增ssh)
标题随便取个名字,内容就粘贴上刚刚复制的id_rsa.pub
的内容就大功告成了。
最后再去命令行,输入ssh -T git@github.com
验证一下是否能连入github了.
当出现这一行文字的时候就说明成功了!(如果出现了这一行文字上面还多出了一行的话,一般就是要让你配一下host,在host中添加多出来的那行提示中出现的ip, 如: 1111.111.11.1 github,然后再次输入ssh -T git@github.com
就会发现那行提示不见了。好像多不多那行提示其实都不影响使用)
4、将hexo部署到github
首先先进入博客项目,输入下面的命令安装依赖
npm install hexo-deployer-git --save
接着找到项目根目录中的配置文件_config.yml
划到最底部,修改其中的Deployment配置,如下
deploy:
type: git
repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
branch: [branch]
message: [message]
参数 | 描述 |
---|---|
repo | git代码库的地址 |
branch | 分支名称 |
message | 自定义提交信息 |
关于branch:一般来说,新建的代码库只会有master一条分支,所以branch填master就可以了。
关于repo:如果不知道代码库的地址的话,最简单的方法就是进入github,找到你要部署的代码库,点击code就能拿到代码库的地址了,如
当这一步的配置设置好后就可以开始部署了,输入以下命令
// 清除缓存
1、hexo clean
// 生成静态文件
2、hexo generate / hexo g
// 部署
3、hexo deploy / hexo d
当看见Deploy done
后,就说明已经部署成功了。还记得之前创建的仓库名吗?
xxx.github.io
。过一会儿就能通过这个地址访问到你博客了。
我自己在部署的过程中出现了报错443的现象,百度找了下解决方法,把部署配置的repo地址从https换成ssh的就好了
至此,你已经成功的搭建好了一个自己的博客,接下来就是写文章/个性化自己的网站了。完结撒花。
参考: