Hexo+github搭建个人博客

·  阅读 521

这是我参与8月更文挑战的第19天,活动详情查看:8月更文挑战

在我刚入行的时候,查看其他前辈的技术博客会很佩服,也想整个自己的博客,做做笔记,总结总结问题和解决方法等等,但是苦于对域名、博客什么的都不懂,不过现在好了,通过Hexo+Github,只需本地跑起来,然后将代码放到github上,就能拥有自己的博客,很简单,下边这是我的博客:reda011.github.io/,献丑了。

闲话少说,马上开搞

我的是win10 64位系统,接下来需要三个重要的东西:1、Node,2、Git,3、Github账户,三者缺一不可。

环境配置:

  1. 安装Node(必须)

可去Node官网下载最新版本node,一路下一步安装即可;

2.安装Git(必须)

可去Git官网下载,用以将本地代码推送到github上;

3.github账号(必须)

用以托管代码,没有账号的自行去github官网申请;

4.安装Hexo

Node和Git安装好之后,就可以通过npm包管理工具安装Hexo:

$ npm install -g hexo
复制代码

注:国内使用npm有的时候会很慢,进而会导致很多奇怪的问题,可通过国内淘宝镜像代替

淘宝镜像使用方法:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
复制代码

上述命令之后,即可使用cnpm代替后续的npm

5.初始化

$ hexo init Blog
复制代码

上述命令会创建一个名为Blog的文件夹,博客初始化的所有内容都将存放在这个文件夹中

接下来切换到Blog目录下

$ cd Blog
复制代码
$ npm install
复制代码

执行如下命令,生成静态页面

$ hexo generate(或者直接hexo g)
复制代码

安装hexo-server包

$ npm install hexo-server --save
复制代码

6.本地启动

$ hexo server (hexo s)
复制代码

浏览器输入http://localhost:4000,就能看到本地hexo的helloworld页面

如上,本地已经能跑起来了。

配置Github

1.创建一个repository

名字必须为:your_user_name.github.io,例如:reda.github.io

2.在本地Blog文件夹下的_config.yml中进行关联设置,将其deploy字段修改为如下:

deploy:
  type: git
  repository: https://github.com/reda/reda.github.io.git
  branch: master
复制代码

其中repository字段设置成github.com/{yourname}/…

3.执行如下命令,进行Git部署

$ npm install hexo-deployer-git --save
复制代码

4.最后,执行配置命令

$ hexo deploy
复制代码

成功之后,在浏览器输入reda.github.io/就能看到自己的博客了,…

注意:有时hexo deploy时,会报错:

bash: /dev/tty: No such device or address 

error: failed to execute prompt script (exit code 1) 

fatal: could not read Username for 'GitHub · Where software is built': No error

...

此时可将上述repository字段设置成https://{yourname}:{yourpassword}@github.com/{yourname}/{yourname}.github.io.git

对了,如果你不喜欢Hexo默认的主题,主题列表还有很多主题供你选择,总有一款你中意。

更换主题

按照各主题安装说明,直接clone到本地,然后将Blog文件夹下的_config.yml的theme字段修改为要替换的主题名称即可。

部署步骤

每次部署基本可遵循以下三步:

$ hexo clean 
$ hexo generate 
$ hexo deploy
复制代码

常用命令:

$ hexo new "postName" #新建文章 
$ hexo new page "pageName" #新建页面 
$ hexo generate #生成静态页面至public目录 
$ hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server) 
$ hexo deploy #将.deploy目录部署到GitHub 
$ hexo help  #查看帮助 
$ hexo version  #查看Hexo的版本
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改