美文网首页iOS Coding程序员Web前端之路
如何使用hexo搭建个人博客(Mac OS系统,windows仅

如何使用hexo搭建个人博客(Mac OS系统,windows仅

作者: 小pxu | 来源:发表于2016-05-12 17:09 被阅读2321次

    思维导图

    一、环境安装

    1. node.js(在node.js官网中下载安装)node.js官网

    2. git(OS系统中直接安装x-code就可以了)

    3. hexo

    1)打开OS系统终端
    2)输入安装hexo的代码(此处安装时有可能会提示输入系统管理员密码)
    $ sudo npm install -g hexo
    

    二、hexo创建静态博客

    1. 新建blog文件夹

    2. 在终端进入该文件夹,初始化博客

    $ hexo init
    

    3. 上述完成后,生成原始文件;blog文件夹就是博客的根目录

    4. 本地查看:启用本地服务命令(退出按ctrl+c)

    $ hexo s
    

    5. 将出现的地址输入浏览器,即可可查看到本地效果


    三、github配置

    1. 注册github账号并登陆

    2. 获取本机的SSH口令

    1)输入获取代码,回车直到出现图片所示图形为止
    $ ssh-keygen
    
    2)输入编译代码
    $ vim ~/.ssh/id_rsa.pub
    
    3)出现SSH口令后,将红框部分复制,并在下方输入:q,随后按下回车可以退出该窗口
    4)进入到github页面设置SSH口令
    • 点击用户下拉菜单中的settings(step1)
    • 点击左侧的SHH and GPG keys(step2)
    • 在Title中输入口令名称(随意)(step3)
    • 在key中贴上SSH口令(step4)

    3. 创建新的仓库

    1)创建新的仓库(repOSitory)
    • 点击用户左侧的+号菜单中的New repOSitory(step1)
    • 在repOSitory name中输入二级域名,格式请严格遵照username.github.io(step2)
    • ps:username填写github的登录用户名,否则上线的时候会报错
    • 是否公开选项可以选取Public(step3)
    • 勾选step4处,会自动生成一份可编辑的README.md文件(建议勾选)(step4)
    • 点击create repOSitory生成仓库完毕(step5)
    2)查看新建的仓库(repOSitory)
    • 可以回到github个人首页点击右侧的仓库区
    • 进入后在step1处选择并复制http地址,注意此时step2处应该是空的

    四、发布博客

    1. 设置blog配置文件

    1)打开blog文件夹下的_config.yml文件
    2)找到最下方的type,输入git(注意冒号后面是带空格的)
    3)repo行可能没有,需要自己输入,后面跟上github上仓库中复制的http地址(注意此时1、2两处应该是一样的username),不然上传时会报错
    4)其他博客设置
    • title:博客名称
    • subtitle:博客副标题
    • description:博客描述
    • author:作者
    • language:语言(简体中文是zh-CN)

    2. 在终端上传博客

    1)进入终端,输入git上传插件安装代码(安装时会提示输入github用户名及密码)
        $ npm install hexo-deployer-git --save
    
    2)安装完毕后,输入获取代码
        $ hexo g
    
    3)最后输入上传代码
        $ hexo d
    
    4)重新在github仓库查看上传文件,此时在step2中会有之前bolg中生成的文件
    5)step3处就是你的博客地址

    五、新建与更新博客

    1. 新建博客

    1)终端bolg文件下,输入新建博客代码
        $ hexo new 'filename'
    
    2)此时在bolg/source/_posts/下面会看到新建的博客
    3)博客文件的后缀是.md文件,OS下推荐使用MOU编辑器mou下载地址

    2. 更新博客

    1)完成编辑后,在终端上依次重复以下代码(此时必须先将编辑器关闭,否则会出现获取错误)
        $ hexo g
        $ hexo d
    
    2)完成后便能刷新博客网页看到新更新的内容了

    相关文章

      网友评论

      • Kikin:博主,“输入git上传插件安装代码”我在这个地方出现了bug,压根没有出现下面的步骤~求解答~
        Kikin:@小pxu 对的我用的是mac
        小pxu:这个好久之前配置的,现在都有点忘记了,你是用的mac吗
        小pxu:你出现什么bug?试试 sudo npm install hexo-deployer-git --save
      • 我没喝酒啊:请教一下 我要修改生成的博客里面的头像下面的内容 比如修改成中文啊 个人名言啊 之类的东西 在yml文件中进行了修改 对应的是
        title:博客名称

        subtitle:博客副标题

        description:博客描述

        author:作者

        language:语言(简体中文是zh-CN)


        可是怎么修改不成功呢??
        四夕二十一画:修改完以后要保存上传更新,也就是说要fork一遍
      • Mr_Jasper_GDUFS:赞~写得很详细,自己成功搭过一次,现在想请教下换电脑了的话咋整 :blush:
      • KennyHito:如何更换主题呢?
      • Jerry_FD:棒!看了三篇文章 只有这个成功了
        小pxu: @Jerry_FD 哈哈,谢啦
      • 6712ed0d908a:最终我要打开github的哪一个URL才能想打开http://localhost:4000那样的效果
        小pxu:@loginSin 你的用户名.github.io

      本文标题:如何使用hexo搭建个人博客(Mac OS系统,windows仅

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