美文网首页
30分钟学会用Hexo搭建个人博客

30分钟学会用Hexo搭建个人博客

作者: Marks | 来源:发表于2017-05-18 18:14 被阅读435次

    前言

    很早就想搭建自己的个人博客,就像刘未鹏 | Mind Hacks廖雪峰的官方网站等大牛那样,能够将个人的学习、经验展现出来,是多么好玩且有意义的一件事情。
    正在学习前端中,是时候试试搭建个人博客了。找了一份如何搭建博客的视频,抱着花费一个月时间把博客建立出来的觉悟。幸好,开始前,问了问琚老师搭建博客复杂程度,好更精确地估算所用时间。
    琚老师提到了Hexo。
    然后用近1小时来查找相关资料,又1小时竟然就将博客成功搭建起来咧,中间浪费了不少时间,如果你能只字不差地按照本教程操作,30分钟甚至更短时间内就可以学会如何用Hexo搭建个人博客了。
    此教程不需要有任何编程基础,跟着步骤,只要能做到只字不差的阅读和操作,就能够搭建起属于你自己的个人博客。

    一、Why:确立目标

    先不要着急行动,在着手操作前,先停下来思考清楚你为什么想要搭建个人博客。
    这很重要,经过认真思考过的清晰可行的目标是你成功实现结果的基石。

    二、What:Hexo是什么

    Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
    利用Hexo + Github Pages能够迅速搭建颜值爆表的个人博客,关键还是免费的哟。

    三、How:具体步骤

    1.安装Hexo

    Hexo是基于Nodejs的博客系统,在安装Hexo之前需要安装Nodejs;是把博客搭建在免费的GitHub上,所以需要安装Git。

    ⑴安装Nodejs
    Node.js的官网下载地址是:https://nodejs.org/
    下载好之后,双击安装,一路Next即可

    ⑵安装Git for windows
    Git for windows 的下载地址是:https://git-for-windows.github.io/
    下载好后也同样是一路Next安装即可。

    ⑶安装Hexo
    ① 搭建好以上环境,打开Git Bash,执行命令:
    npm install hexo-cli -g

    ② 初始化
    进入你的博客目录,我的在E:/myblog 。点击右键,选择Git Bash Here。
    然后在其中运行以下命令hexo init

    图1

    接着,输入 npm install

    图2

    然后,运行hexo g

    图3

    运行hexo s

    图4

    已经在本地成功的搭建了博客系统,可以去浏览器输入地址localhost:4000查看。

    hexo init //初始化一个文件夹,它会为这个文件夹配置所有骨架
    hexo g //即hexo generate,生成静态文件
    hexo s //即hexo server,创建服务
    hexo d //即hexo deploy,用于将本地文件发布到github上
    hexo n //即hexo new,用于新建一篇文章

    2.配置Git

    目前为止,我们已成功在本地搭建了一个博客系统,现在将其部署到github上。

    ⑴ 在github上注册一个账号,创建一个新的仓库。

    图5 图6

    Repository name和自己的用户名相同。比如我的用户名为liming104,那么仓库名为liming104.github.io

    ⑵配置SSH
    上传文件需要配置ssh key,不然无法上传。

    设置name和emai:

    git config --global user.name "<your name>"
    git config --global user.email "<your email>"```
    
    ### 生成ssh密钥
    `ssh-keygen -t rsa -C "<your github's email>"`
    这一步在~/.ssh/下生成了两个文件id_rsa 和 id_rsa.pub
    
    ### 在Github上添加SSH密钥
    打开上述的id_rsa.pub 文件,复制其内容,在https://github.com/settings/keys下 add new ssh key,
    
    ⑶将本地文件部署到Github
    进入你的博客文件夹,找到并打开_config.yml文件,在底部修改 (Deployment部分)输入下面的代码
    

    Deployment

    Docs: https://hexo.io/docs/deployment.html

    deploy:
    type: git
    repository: https://github.com/liming104/liming104.github.io
    branch: master```
    注意冒号(:)后都有一个空格。

    ⑷部署
    配置好后,hexo g然后hexo d

    图7

    有问题的话,通过npm install hexo-deployer-git --save解决。

    之前的步骤如果没什么问题,我们在浏览器中访问https://liming104.github.io/ ,已经能够看到我们个人的博客了。

    试着写一篇文章,《30分钟学会用Hexo搭建个人博客》。
    我们的新建博客创建在E:\myblog\source_posts\hexo搭建博客系统.md,md后缀是markdown的文件格式。

    hexo g >>创建静态文档
    hexo s >>本地预览
    hexo d >>上传github

    从此以后,充分利用你专属的个人博客,记录你的成长轨迹,愉快地玩耍吧!

    参考:
    hexo搭建博客系统
    在Github上搭建一个免费的Hexo博客系统

    相关文章

      网友评论

          本文标题:30分钟学会用Hexo搭建个人博客

          本文链接:https://www.haomeiwen.com/subject/eqzsxxtx.html