美文网首页
hexo+github 搭建个人技术博客

hexo+github 搭建个人技术博客

作者: LinXunFeng | 来源:发表于2017-05-10 08:42 被阅读142次

    创建一个github仓库

    新建仓库

    填写仓库信息

    这个仓库的名字需要和你的账号对应, 如 linxunfeng.github.io
    输入基本信息,然后点击下方的绿色按钮来创建仓库.


    填写信息

    安装Hexo

    需要先在电脑中安装Node.js和git

    • node:用来生成静态页面的 到Node.js官网下载相应平台的最新版本,一路安装即可。
    • git: 把本地的hexo内容提交到github上去.没有安装的可以看此教程

    接下来安装hexo
    终端输入:(一定要加上sudo,否则会因为权限问题报错)

    sudo npm install -g hexo
    

    cd到你想存放博客的文件夹下,例如我在桌面上的gitHub目录下的一个hexo文件夹

    由于这个文件夹将来就作为你存放代码的地方,所以最好不要随便放。

    cd /Users/username/Desktop/gitHub/hexo
    

    然后在终端中输入 【hexo init】进行初始化,hexo会自动下载一些文件到这个目录

    hexo init
    
    初始化

    初始化后目录结构如图


    目录结构

    启动Hexo

    // 是开启本地预览服务
    hexo s
    
    启动Hexo

    按提示在浏览器下打开

    http://localhost:4000/
    
    浏览器

    配置Hexo

    打开_config.yml,滑到最下面,将deploy的内容修改为如图所示内容


    _config.yml
    deploy:
      type: git
      repository: https://github.com/LinXunFeng/linxunfeng.github.io.git
      branch: master
    

    repository对应的值可以在这个地方复制过来,也可以自己动手修改上面的配置

    repository

    注意了:hexo的配置文件(不仅仅是_config.yml),只要出现【:】,后面一定要加上个空格,不然会报错

    生成静态页面

    hexo g
    // 或者
    hexo generate
    
    生成静态页面

    若出现如下报错:

    ERROR Local hexo not found in ~/blog
    ERROR Try runing: 'npm install hexo --save'
    

    则执行命令:

    npm install hexo --save
    

    若无报错,自行忽略此步骤。

    此时目录下会多出一个public文件夹,里面存放的就是我们刚刚生成的静态页面


    目录结构

    上传到github

    hexo deploy
    // 或者
    hexo d
    

    如果执行后报错

    Deployer not found: github 或者 Deployer not found: git
    

    则需要我们再安装一个插件:

    npm install hexo-deployer-git --save
    
    Deployer not found: git

    安装完插件之后再执行一下【hexo d】,它就会开始将public文件夹下的文件全部上传到你的gitHub仓库中

    Paste_Image.png

    如果你之前未关联过Github,则执行hexo deploy命令时终端会提示你输入Github的用户名和密码,按提示输入即可

    浏览器中打开网址[https://linxunfeng.github.io/] 显示的页面与http://localhost:4000
    一样,这里的https://linxunfeng.github.io 换成你自己的仓库名称

    Paste_Image.png

    发布文章

    终端cd到你的博客文件夹下,执行如下命令新建文章:

    hexo new "postName"
    

    名为postName.md的文件会建在目录/blog/source/_posts下。

    文章编辑完成后,终端cd到你的博客文件夹下,执行以下两个命令:

    hexo generate             //生成静态页面
    hexo deploy            //将文章部署到Github
    

    安装主题

    Hexo官网主题页去寻找你自己喜欢的主题,这里以NexT.Muse为例
    终端cd到你的博客文件夹下执行如下命令:

    // 将hexo-theme-next这个主题克隆到 ./themes目录下,并修改文件夹名字为next
    git clone https://github.com/iissnan/hexo-theme-next themes/next
    
    hexo-theme-next

    将_config.yml 里theme的名称landscape修改为next

    设置主题

    然后再执行如下命令(每次部署文章的步骤):

    //清除缓存文件 (db.json) 和已生成的静态文件 (public)
    hexo clean 
    //生成缓存和静态文件
    hexo g 
    //重新部署到服务器
    hexo d 
    

    至于更改theme内容,比如名称,描述,头像等去修改./_config.yml文件和./themes/next/_config.yml文件中对应的属性名称即可,不要忘记冒号:
    后加空格。详细的介绍请参考NexT 使用文档

    问题小提示

    当遇到一些莫名其妙的问题时,可以尝试先执行命令:

    sudo npm install
    

    出现问题的行为比如:换了一台MBP ; 不小心执行了【hexo init】等。
    出现的问题比如:执行 【hexo g】生成静态页面,并【hexo s】 来开启本地预览的时候,页面只出现

    Cannot GET /
    

    此时你会发现publish文件夹下生成的文件有什么缺少了~

    相关文章

      网友评论

          本文标题:hexo+github 搭建个人技术博客

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