资讯专栏INFORMATION COLUMN

入门hexo ! 搭配next、GiteePages,轻松免费开发高质量个人博客 ( Linux D

raoyi / 1159人阅读

摘要:本文重点介绍下开发搭配,免费轻松实现高质量高颜值博客。其他系统的方法大同小异,只是环境配置略有不同,只要有和环境便可轻松入门。本篇内容也可以查看我的个人博客


本文重点介绍Linux deepin下开发hexo 搭配next、GiteePages,免费轻松实现高质量高颜值博客。其他系统的方法大同小异,只是环境配置略有不同,只要有git和npm环境便可轻松入门hexo。

最终效果: https://tczmh.gitee.io/hexodemo/

一、安装

先安装git npm依赖

sudo apt install git
sudo apt install npm

初始化

hexo init blog
cd blog
npm install

启动

hexo server

打开浏览器访问 http://localhost:4000
即可看到第一个hexo页面

二、主题

换主题 ( 位置还是在blog文件夹内 Linux下默认位置是 /usr/lib/blog )

git clone https://github.com/iissnan/hexo-theme-next themes/next

配置文件

vim _config.yml

theme: landscape 改为 theme: next

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

部署 重启

hexo g -d
hexo s

效果如图

三、发文章

发表文章

hexo new post "初识hexo"

编辑文章

vim /usr/lib/blog/source/_posts/初识hexo.md

修改内容,语法为markdown
(语法问题,所有的 ` 被我替换成了 . 使用的时候要替换回来)

---
title: test
date: 2019-01-17 09:27:29
tags: test
---
## start
----
**这是加粗的文字**
*这是倾斜的文字*`
***这是斜体加粗的文字***
~~这是加删除线的文字~~
----
![blockchain](https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/
u=702257389,1274025419&fm=27&gp=0.jpg "区块链")
----
简书
----
姓名|技能|排行
--|:--:|--:
刘备|哭|大哥
关羽|打|二哥
张飞|骂|三弟
----
...javascript
    function clean(){
         alert("已完成!");
    }
...
----
...flow
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认?
st->op->cond
cond(yes)->e
cond(no)->op
...
----
##end

部署 重启

hexo g -d
hexo s

效果如下
https://tczmh.gitee.io/hexodemo/2019/01/17/demo/

四、部署线上

避坑指南:用户名之后会用来作为二级域名
例子:
若 用户名为qiaofeng
那么 就可以获得一个免费的个人线上地址qiaofeng.gitee.io
若 新建项目的时候,项目名如果是blog
那么 访问地址就是https://qiaofeng.gitee.io/blog/
若项目名与用户名相同也叫qiaofeng
那么 可以直接访问二级域名访问 https://qiaofeng.gitee.io 而省略项目名

先注册码云(https://gitee.com),新建项目

(截图省略)
打开【服务】 - 【Gitee Pages】
勾选【强制使用 HTTPS】
点击【启动】
看到“已开启 Gitee Pages 服务,网站地址: https://tczmh.gitee.io/hexodemo” 即可

回到本地,修改配置文件

vim _config.yml

中间修改

(这里的url是刚才开启Gitee Pages 服务出现的url,root必须是gitee新建的项目名,如果最后出现读不到js css,显示混乱等问题,就是这一步不对)

url: https://tczmh.gitee.io/hexodemo
root: /hexodemo

结尾修改

deploy:
  type: git
  repo: https://gitee.com/tczmh/hexodemo.git
  branch: master

其中repo填写gitee上获得的git地址,在【项目详情】 - 【克隆/下载】 - 【复制】

安装依赖

npm install hexo-deployer-git --save

设置全局git (若邮箱和用户名不知道,可以在gitee的个人设置页面查看)

git config --global user.email "你的邮箱"
git config --global user.name "你的用户名"

清理&更新&部署一条龙命令 (可能需要输入账号密码,就输gitee登录的即可)

hexo clean && hexo g && hexo d

看到以下内容说明成功

remote: Powered By Gitee.com        
To https://gitee.com/tczmh/hexodemo.git
 + cfcc494...395648d HEAD -> master (forced update)
分支 "master" 设置为跟踪来自 "https://gitee.com/tczmh/hexodemo.git" 的远程分支 "master"。
INFO  Deploy done: git

访问地址:https://tczmh.gitee.io/hexodemo

和本地测试的一样

大功告成!

之后只需要修改本地配置文件
来配置博客,发表文章
更多功能访问官方文档
https://hexo.io/zh-cn/docs/
http://theme-next.iissnan.com/getting-started.html

补充一下

生成二维码方法
(因为开启HTTPS 所以直接支持 微信扫一扫 微信长按二维码识别等)
https://cli.im/[](https://cli.im/)
输入【URL】
点击【生成】即可

主要就是这些,都是一些基本入门的东西,深入研究可以说是其乐无穷。
本篇内容也可以查看我的个人博客:https://zzzmh.cn/single?id=54

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101142.html

相关文章

  • 使用hexo+github搭建免费个人博客详细教程

    摘要:如果实在不会安装可以去网上找教程。打开,跳转到刚刚创建的文件夹位置,运行命令然后会在你的文件夹中搭建好了环境配置配置修改一些你的博客名字描述作者等。基于我的个人经验,建议都开启开启标签页命令,在博客目录添加元数据开启分类页命令,在博 Windows环境下Git安装、配置SSH key、安装node.js npm、安装Hexo及配置、发布博客 前言 使用github pages服务搭建博客的...

    番茄西红柿 评论0 收藏0
  • 技术存档:建站(一)

    摘要:自建主要花费在购买云服务器上和静态资源托管上,剩余工作一力承担。 写这系列文章的初衷是:对自己知识面广度和深度的确定,并以此调整后续的发展和学习方向。希望能达到温故而知新的效果。 选择从建站入手,是因为这个是最常见的要求。对于公司而言,网站是展示公司主旨、业务、沟通方式、宣传营销的必选方案,一个符合公司形象的高质量官网,必然能让客户留下良好的第一印象。,对个人而言,博客是表达其特有的思...

    chnmagnus 评论0 收藏0
  • 2017年最新基于hexo搭建个人免费博客——从零开始

    摘要:前言搭建此博客是因为通过上了解到进而知道了可以把静态网页博客托管给仓库或许您已经通搭建个人博客网站了解到如何通过实现个人博客网站的建立。但是尽管您已经成功建立博客网站,但是你需要对网站做合适的配置和调整才能迎合你的网站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言 搭建...

    Paul_King 评论0 收藏0
  • 2017年最新基于hexo搭建个人免费博客——从零开始

    摘要:前言搭建此博客是因为通过上了解到进而知道了可以把静态网页博客托管给仓库或许您已经通搭建个人博客网站了解到如何通过实现个人博客网站的建立。但是尽管您已经成功建立博客网站,但是你需要对网站做合适的配置和调整才能迎合你的网站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言 搭建...

    zacklee 评论0 收藏0
  • 2017年最新基于hexo搭建个人免费博客——从零开始

    摘要:前言搭建此博客是因为通过上了解到进而知道了可以把静态网页博客托管给仓库或许您已经通搭建个人博客网站了解到如何通过实现个人博客网站的建立。但是尽管您已经成功建立博客网站,但是你需要对网站做合适的配置和调整才能迎合你的网站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言 搭建...

    hlcfan 评论0 收藏0

发表评论

0条评论

raoyi

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<