• Hexo 博客搭建


    什么是Hexo?

    Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

    准备工作

    GitHub账号

    Git Windows版客户端

    NodeJS环境

    步骤一:创建你在GitHub上的Hexo项目仓库

    默认的域名是http://yourusername.github.io/,如果想要一个特别的域名,可以买一个域名,并在setting里面绑定就可以了。以上完成了第一步,我们有自己的代码仓库了,接下来我们要配置本机环境了!

    步骤二:本机环境搭建

    我们需要下载NodeJS与Git,安装基本上就是默认安装,没有什么技术难点。

     选择Windows64位版本,下载安装。

    完成之后,打开命令窗口(Win+R,输入CMD,回车),分别输入node -v,  npm -v, git -version,  如果都能像下图一样返回版本号就说明安装好了。

     步骤三:SSH授权

    打开git bash,输入ssh-keygen -t rsa, 接着回车三下

    这样就会在C盘用户目录下的.ssh下生成id_rsaid_rsa.pub这两个文件,前者是密钥,后者是公钥,用记事本打开id_rsa.pub,复制其中的全部内容,添加到GitHub上,这样本地的id_rsa密钥就可以和GitHub上的id_rsa.pub公钥进行配对,授权成功。

    复制这一串代码到下面这个地方

     测试Git连通性

    步骤四:设置本地博客服务器(之后直接上GitHub托管后再摒弃这个本地的)的配置

    在任意一个地方新建一个文件夹,在git bash中进入这个文件夹,比如cd /f/Hexo/(之后安装的服务器端代码会保存在这个文件夹内),输入npm install -g hexo安装hexo即可。

    注意:这里我设置的Hexo文件夹是我是事先创建好的,用来存放Hexo服务器代码的文件夹,需要与后面创建Hexo博客项目的文件夹加以区分。

    cd /f/Hexo
    npm install -g hexo
    npm install hexo --save

    注意,在回车之后,可能会出现一行WARN的警告语句,不用管它,什么都不要按,等着。。。过一段时间如果出现hexo版本号之类的语句就代表差不多了。

    然后输入npm install hexo --save这个时候你会看到命令行出现了一堆白字,紧接着输入hexo v查看是否安装成功

    服务器代码文件夹长这个样子的~

     步骤五:初始化Hexo工程 名字你随便起

    注意:在生成项目前,提前创建工程目录文件夹(我的项目目录Hexo_init)

    /hexo/>>>> hexo init Hexo_init
    ## 等待。。。。
    
    

    步骤六:启动Hexo服务器

    hexo s

     

    项目成功跑起来了!!!

    步骤七:用你自己的域名绑定到xxx.github.io

    没有域名的话先去申请一个域名

    在仓库里添加CNAME文件并在文件中填写绑定的域名

    文件里填写的内容:要绑定的域名(不要包含Http://和www)

    进入设置

    找到 Custom domain添加域名后保存即可。

    (添加CNAME文件并在文件中填写绑定的域名后应该会自动保存,看看有没有自动保存)

    阿里云添加域名解析

    ping你的,得到一个IP;

    修改你的域名解析记录;

    添加两个A记录,用得到的IP,一个主机记录为:“www”,一个为“@”,

    注意!!!之后发现了一个bug,每次本地Hexo生成提交后,tingguoguo.cn无法继续正常访问,发现是GitHub的CustomDomain会被清空!

    解决方案: 在本地Hexo项目source文件夹下放个CNAME文件(没有后缀名 文件类型:文件 啥后缀都没有)

    与仓库的CNAME文件完全一致即可!!!

    步骤八:上传到GitHub

    cd Hexo_init/
    npm install hexo-deployer-git --save
    hexo g
    # g 是生成的意思 hexo d
    # d 是提交的意思

    之后你就会发现你的GitHub仓库里面就有了这个项目!!!

  • 相关阅读:
    JS---自己制作的选项卡
    CSS---左右固定,中间自适应布局
    Jquery Ajax示例---load,get,post方法
    JS---高级进阶
    JS---基础知识
    雅虎军规
    JS---setTimeout()与setInterval()的使用
    CSS3---绘制六边形
    CSS---CSS sprites的使用
    ARC(Automatic Reference Counting )技术概述
  • 原文地址:https://www.cnblogs.com/tingguoguoyo/p/11178964.html
Copyright © 2020-2023  润新知