美文网首页
前记—博客的出生

前记—博客的出生

作者: 皮卡乒乓 | 来源:发表于2018-06-18 12:08 被阅读0次

    2015年大三至今,我的博客从免费虚拟空间+独立域名,到阿里云主机,腾讯云主机。到现在,我突然觉得折腾够了,我想一个安稳的地方,让我只关注内容的写作本身。当然,我的个人网站还在运行,贾宛龙,博客功能迁移还在,但不在维护更新,我的 简书上偶尔还会发表技术文章,但也会陆陆续续转移到这里。

    在这里抛弃其他的,只谈技术,其实很简单,我的技术栈是github page+hexo,没有编程经验的同学看看文章摸索两遍也可以实现。

    1、安装软件环境

    首先需要安装新版本的node,它本身包含着npm,而且会自动帮你安装至环境变量,非常傻瓜化,此外还需要安装git,为了将代码同步到github上面。这两个软件在官网搜索安装适合本机的就行。

    2、安装淘宝镜像

    由于墙的原因,我们不得不借助淘宝镜像这样的高效率东西来提升效率,在这我选的是全局安装

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    

    3、安装hexo脚手架

    因为我的博客是基于hexo而搭建的。那么全局安装hexo也是必须的

    npm install hexo-cli -g
    

    4、初始化hexo项目

    在这里,你需要新建一个文件夹作为你的项目存放地,在文件夹里,右键git执行hexo init初始化一个hexo最基本的项目

    hexo init
    

    5、安装hexo的依赖

    在这一步骤主要是将安装博客依赖的环境,比如vue,jquery等包文件,我们这里只需执行命令,让它自己安装即可

    npm install
    

    6、打包项目

    此时项目已经完成初始化操作,但还没有我们常见的html文件等,此时需要将hexo项目打包成浏览器可以运行的静态文件

    hexo g
    

    当执行完命令,你会发现在文件夹多了public文件夹,点开则看到了我们熟悉的index.html等文件

    7、本地运行

    当安装完hexo,以及其依赖,我们则可以在本地运行hexo为我们提供的脚手架页面,此时执行hexo s 则控制台显示成功,打开浏览器,输入http://localhost:4000,则可查看hello owrld

    hexo s
    

    8、注册github账号

    因为我的网站是寄托github,所以需要注册github账号,github为每一个用户提供了一个单独的可直接访问的项目,注意此项目的的项目名必须是用户名,记得开启page功能,如果成功后,访问 用户名.github.io 则能直接运行这个项目,但只限于静态文件。我的地址是jiawanlong.github.io 访问地址是 博客

    9、配置hexo指向github

    在这里主要是将博客自动同步到自己刚创建的github账号下的pages下,需要修改根目录下的config.yml,注意每一个单词前的空格

    deploy:
          type: git
          repository: git@github.com:jiawanlong/jiawanlong.github.io.git
          branch: master
    

    10、生成key文件

    ssh-keygen -t rsa -C "自己的github关联的邮箱"
    

    如果执行失败,则执行

    ssh-agent -s
    eval `ssh-agent -s`
    ssh-add
    

    在这里三按回车键,执行完会发现,本地的c盘下,用户名文件夹下多了个.ssh文件夹

    11、复制key文件到github

    用记事本打开并复制.ssh文件夹下id_rsa.pub的内容,到github账号下的settting下的ssh选项,在这里title可以随意填写,将key粘贴下面

    12、测试是否关联成功

    git bash 里输入以下代码 不要改任何一个字

    success ssh -T git@github.com
    

    当询问yes or no时选yes,如果出现success,则表示成功

    13、完善个人github信息

    如果github都不知道我们是谁,怎么会让我们提交代码呢?

    git config --global user.name "github名字"
    git config --global user.email "github邮箱"
    

    14、安装 hexo-deployer

    除了上述外,还需要安装 hexo-deployer 来进行傻瓜化自动部署,将本地的hexo项目通过命令自动部署github上

    npm install hexo-deployer-git --save
    

    15、部署

    hexo d
    

    此时,打开你的用户名.github.io,则可以看到本地的hexo已经部署到github page上面,博客就此完成

    16、完善

    当打开项目时候,发现很卡,通过f12发现啊,妈的,jquery是google的,所以握全局查找,将juqery的路径替换了一下,重新clean后,再次部署,美滋滋

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    

    16、安装主题

    确认过眼神,maupassant就是我想要的主题,某大神已经将主题的脚手架搭建好,包括评论功能,百度统计,以及页面访问量等功能

    git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
    npm install hexo-renderer-pug --save
    npm install hexo-renderer-sass --save
    

    17、配置主题

    修改根目录下的config.yml ,找到theme选项,改成maupassant,则重新打包生成,发现已经焕然一新
    将语言设置成中文
    在主题的配置项可以配置livere评论账号,则博客加了评论功能,添加百度统计账号,则会自动关联上,可以查看博客的实时访问人,及其ip,城市等

    18、就这样,棒

    相关文章

      网友评论

          本文标题:前记—博客的出生

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