利用hexo无需后端编写自己的博客

只需几步编写自己的博客

很多前端小伙伴们有编写文章的习惯,这个是很好的,但是依赖第三方的始终不太方便,今天给大家介绍一个只需几步就可以编写自己的博客,就是hexo

1.什么是 Hexo?

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

2.安装 Hexo

安装前提
    安装git; 安装node(Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本);
安装 Hexo

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

npm install -g hexo-cli

如果并不想全局安装可使用

npm install hexo

安装完成后开始创建博客项目

hexo init studyHexo
cd studyHexo
npm install

项目创建好之后,项目的结构如下

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml 为项目配置文件,可以在此配置大部分参数

package.json 应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。

package.json
   {
          
   
      "name": "hexo-site",
      "version": "0.0.0",
      "private": true,
      "hexo": {
          
   
        "version": ""
      },
      "dependencies": {
          
   
        "hexo": "^3.8.0",
        "hexo-generator-archive": "^0.1.5",
        "hexo-generator-category": "^0.1.3",
        "hexo-generator-index": "^0.2.1",
        "hexo-generator-tag": "^0.2.0",
        "hexo-renderer-ejs": "^0.3.1",
        "hexo-renderer-stylus": "^0.3.3",
        "hexo-renderer-marked": "^0.3.2",
        "hexo-server": "^0.3.3"
      }
   }

scaffolds 模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。

source 资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

themes 主题 文件夹。Hexo 会根据主题来生成静态页面。

3.开始写作

hexo new helloworld

这个时候直接把写好的md文件内容拷贝到helloworld.md文件下保存后运行

hexo server

或者

hexo s

这样项目成功启动后我们访问http://localhost:4000/ 可以看到自己博客的首页了,是不是很简单呢。

下期操作把博客上传到自己的服务器上,让大家都可以访问到。

经验分享 程序员 微信小程序 职场和发展