资讯专栏INFORMATION COLUMN

前端小白徒手搭博客之路

shiweifu / 1123人阅读

摘要:当函数完成前端小白徒手搭博客之路前端小白徒手搭博客之路前言作为一个前端小白,一直以来,样式布局设计灵感都是自己的痛点。

前言

本博客为最最最基本的html静态页面打造而成。

github地址
线上地址

Github Pages

在github上搭建博客,免费又方便,具体可以参考这两篇文章:
怎样在github上创建一个github pages的博客
手把手教你在Github Pages搭建自己写的页面

如果想打造博客专属域名,如下:

1. 域名购买与解析

这里我们可以通过万网申请,查找你想申请域名,购买就可以了。

购买域名完成,进入管理控制台:

找到你已经购买的域名,点击解析,进入如下页面:

添加两条记录:

主机记录www对应 www.域名

主机记录@对应 域名

记录类型-CNAME
记录值-你的仓库名

2. CNAME

在你的仓库创建一个CNAME文件,内容为你的域名,例如:

3. Settings

在仓库设置你的域名:

现在通过购买的域名访问你的个人站点了。

接下来你可以开始为你博客大展手脚添加各种炫酷样式。

开始

博客目录结构:

1. BootCDN

稳定、快速、免费的前端开源项目 CDN 加速服务。

我们可以从BootCDN引用需要用到的JS库

// index.html

    
2. Iconfont

阿里巴巴矢量图标库,阿里妈妈MUX倾力打造的矢量图标管理、交流平台。

注册一个用户后,新建项目,把需要用到的图标加入到项目中,生成代码,直接引入就可以用了。

// index.html
3. 极简图床

免费图床,markdown链接好利器。

4. 评论

Gitment:使用 GitHub Issues 搭建评论系统

5. 文章

博客所有文章都放在md目录下,用来直接访问,只支持Markdown。

由于没有服务器,所以用catalogue.js来放静态数据。

function JsonDate() {}

JsonDate.prototype.catalogues = [{"id":"fb6d78f11adcee47d22c2d618694e152","title":"异步编程","year":2018,"createTime":1528103681796,"abstract":"如何维护本体希望看到如下输出结果:但事实上,你会看到:怎么回事?大多数情况下,当一个函数嵌套在另一个函数中时,它就会自动继承父宿主函数的作用域,因而就能访问所有的变量了。那么,为什么嵌套的回调函数却没有返回正确的属性的值呢?这个问题归根于关键字和异步回调函数本身。别忘了,当你调用这样的函数的时候,它会首先初始化自己,然后调用底层的操作系统函数,并把回调函数插到事件队列中去。执行完会立即返回给函数,然后退出。当函数完成...","next":"前端小白徒手搭博客之路"},{"id":"642ac0b4cacd8745d644aaf45d1cca7e","title":"前端小白徒手搭博客之路","year":2018,"createTime":1528103681794,"abstract":"前言作为一个前端小白,一直以来,样式、布局、设计、灵感都是自己的痛点。看到前端人士随手一来就是一个高大上的网页,真是羡慕不已。所以决定从开始,打好基础,写一个传统的静态页面博客。项目地址线上地址我选择在上搭建博客,具体可以参考这两篇文章:怎样在上创建一个的博客手把手教你在搭建自己写的页面如果想打造博客专属域名,如下:域名购买与解析这里我们可以通过万网申请,查找你想申请域名,购买就可以了。购买域名完成,进入管理控制台:...","next":"What is Node","prev":"异步编程"},{"id":"08ad6d06e8a9c0c8aa4f4c45381e955d","title":"What is Node","year":2018,"createTime":1528103681789,"abstract":"出现之前应用往往基于客户端服务器模式,当客服端向服务器请求资源时,服务器会响应这个请求并且返回响应的资源。服务器只会在接收到客服端请求时才会做出响应,同时会在响应结束后关闭与客户端的连接。这种设计模式需要考虑到效率问题,因为每一个请求都需要处理时间和资源。因此,服务器在每一次处理请求的资源后应该关闭这个连接,以便于响应其他请求。如果同时有成千上万个请求同时发往服务器,服务器会变成什么样子呢?线程是系统能够并行处理多任...","next":"Promise对象","prev":"前端小白徒手搭博客之路"},{"id":"00dada12c7e31b9f7bb37a3b2af7f7d4","title":"Promise对象","year":2018,"createTime":1528103681787,"abstract":"的含义所谓,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,是一个对象,从它可以获取异步操作的消息。对象有一下两个特点:对象的状态不受外界影响。对象代表一个异步操作,有三种状态:(进行中)、(已成功)和(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。一旦状态改变,就不会再变,任何时候都可以得到这个结果。对象的状态改变,只有两种可能...","prev":"What is Node"}];

JsonDate.prototype.getCatalogues = function() {
    return this.catalogues;
};

JsonDate.prototype.getCatalogueInfo = function(index) {
    return this.catalogues[index];
};

这样,就可以在页面上引用:


So,发布新文章的时候,就很简单的了,只需把文件添加到md目录下,再修改一下下catalogue.js的catalogues数据就行。

..因为太麻烦了,便写了一键发布的脚本shell.js。

shell.js是基于node环境,随便写写,应该可以用,贴上代码:

"use strict";

const fs = require("fs");
const path = require("path");
const crypto = require("crypto");
const util = require("util");

const readline = require("readline");

const readdir = util.promisify(fs.readdir);
const stat = util.promisify(fs.stat);
const readFile = util.promisify(fs.readFile);
const writeFile = util.promisify(fs.writeFile);
const loadMd = util.promisify(load_md);

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

let _folder = process.argv[2];
let _file = process.argv[3];

if (!_folder && !_file) {
    process.stdout.write("请输入 -文章所在文件夹名 -要写入的文件名: 
");
    process.stdout.write("-d (当前文件夹,默认文件catalogue.js)
");
    process.stdout.write("      or
");
    process.stdout.write("./ catalogue.js
");
    process.stdout.write("> ");
} else {
    load(_folder, _file)
        .then(data => {
            console.log(data);
            rl.close();
        })
        .catch(err => {
            err.msg && process.stdout.write("error:" + err.msg + "
");
            process.stdout.write("文件夹:" + err.folder + "
");
            process.stdout.write("文件:" + err.file + "
");
            process.stdout.write("请输入正确的路径名: 
");
            process.stdout.write("> ");
        });
}

rl.on("line", line => {
    let parts = line.split(new RegExp("[ ]+"));
    if (parts.length <= 1) {
        if (parts[0] === "-d") {
            load(parts[0], "")
                .then(data => {
                    console.log(data);
                    rl.close();
                })
                .catch(err => {
                    err.msg && process.stdout.write("error:" + err.msg + "
");
                    process.stdout.write("文件夹:" + err.folder + "
");
                    process.stdout.write("文件:" + err.file + "
");
                    process.stdout.write("请输入正确的路径名: 
");
                    process.stdout.write("> ");
                });
        } else {
            process.stdout.write("请输入正确的格式 (文章所在文件夹名 要写入的文件名): 
");
            process.stdout.write("> ");
        }
    } else {
        load(parts[0], parts[1])
            .then(data => {
                console.log(data);
                rl.close();
            })
            .catch(err => {
                err.msg && process.stdout.write("error:" + err.msg + "
");
                process.stdout.write("文件夹:" + err.folder + "
");
                process.stdout.write("文件:" + err.file + "
");
                process.stdout.write("请输入正确的路径名: 
");
                process.stdout.write("> ");
            });
    }
});

function load(_folder, _file) {
    if (_folder === "-d" && !_file) {
        _folder = "md";
        _file = "md/catalogue.js";
    }
    _folder = path.resolve(__dirname, _folder);
    _file = path.resolve(__dirname, _file);
    return new Promise((resolve, reject) => {
        return (async () => {
            try {
                let catalogues = await loadMd(_folder);
                let file = await readFile(_file);
                let catalogues_reg = /[((
s*)*({([^]+?)})?(
s*)*)?]/;
                file = file.toString("utf8");
                if (!catalogues_reg.test(file)) throw {msg: "没找到可替换内容位置,请确保catalogues = []"};
                let f = file.replace(catalogues_reg, JSON.stringify(catalogues));
                await writeFile(_file, f);
                resolve("文章添加完毕!");
            } catch (err) {
                err.folder = _folder;
                err.file = _file;
                reject(err);
            }
        })();
    });
}

async function load_md(dir, callback) {
    try {
        let files = await readdir(dir);

        files = files.filter(fileName => path.extname(fileName) === ".md" && path.basename(fileName, ".md") !== "关于我");
        if (files.length === 0) callback({msg: "当前文件夹下没有md文件"});

        let catalogues = [];

        for (let i = 0; i < files.length; i++) {
            let status = await stat(dir + "/" + files[i]);
            let file = await readFile(dir + "/" + files[i]);

            file = file.toString("utf8");

            file = file.match(/[^x00-xff]/g).join("").substr(0, 210);

            let fileName = files[i].split(".")[0];

            let md5 = crypto.createHash("md5");
            md5.update(fileName, "uft8");
            let id = md5.digest("hex");

            let ctime = new Date(status.ctime);
            catalogues.push({
                id,
                title: fileName,
                year: ctime.getFullYear(),
                createTime: ctime.getTime(),
                abstract: file.length > 200 ? file + "..." : file
            });
        }

        if (catalogues.length) {
            catalogues.sort(compare("createTime"));

            catalogues.forEach((catalogue, i) => {
                if (catalogues.length <= 1) return;

                if (i !== catalogues.length - 1) catalogue.next = catalogues[i + 1].title;
                if (i !== 0) catalogue.prev = catalogues[i - 1].title;
            });

            callback(null, catalogues);
        }
    } catch (err) {
        callback(err);
    }
}

function compare(property) {
    return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
    };
}

本想写成支持自定义目录、自定义文件,但是页面写死的东西太多,自定义名的文件好像也没什么用,不用在意..

现在,只需将文章添加到目录下,再

> node shell -d

一下下,就可以开心地提交代码了。

后记

第一次写文章难免会紧张和哆嗦,欢迎大家指正和批评。

前段时间刚好看到某云优惠,入手一台云服务器,后续会有博客升级版。

最后最后,走过路过千万别错过Star一下哦!

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

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

相关文章

  • 前端小白徒手博客之路

    摘要:当函数完成前端小白徒手搭博客之路前端小白徒手搭博客之路前言作为一个前端小白,一直以来,样式布局设计灵感都是自己的痛点。 前言 本博客为最最最基本的html静态页面打造而成。 github地址 线上地址 showImg(https://segmentfault.com/img/remote/1460000015336725?w=320&h=320); Github Pages 在git...

    sean 评论0 收藏0
  • 3月份前端资源分享

    摘要:面试如何防骗一份优秀的前端开发工程师简历是怎么样的作为,有哪些一般人我都告诉他,但是他都不听的忠告如何面试前端工程师 更多资源请Star:https://github.com/maidishike... 文章转自:https://github.com/jsfront/mo... 3月份前端资源分享 1. Javascript 使用judge.js做信息判断 javascript...

    nanchen2251 评论0 收藏0
  • 徒手用 Docker 构建自己的 PHP 开发环境

    摘要:用进行操作为在的工作区域,项目也是挂载在里面,所有我们可以直接在容器里运行。或者进入宿主机目录下用命令注意事项注意挂载路径构建失败时,注意容器内是否报错加速镜像。本文首发在我的博客徒手用构建自己的开发环境 1. 前言 1.1 为什么要用 Docker ? 是否有这样的场景,你搞了一个项目,在本地开发时需要搭建环境,放到线上时也需要搭建环境,到公司想暗戳戳玩一下要搭建环境,不搭还不行,因...

    CoreDump 评论0 收藏0
  • 徒手用 Docker 构建自己的 PHP 开发环境

    摘要:用进行操作为在的工作区域,项目也是挂载在里面,所有我们可以直接在容器里运行。或者进入宿主机目录下用命令注意事项注意挂载路径构建失败时,注意容器内是否报错加速镜像。本文首发在我的博客徒手用构建自己的开发环境 1. 前言 1.1 为什么要用 Docker ? 是否有这样的场景,你搞了一个项目,在本地开发时需要搭建环境,放到线上时也需要搭建环境,到公司想暗戳戳玩一下要搭建环境,不搭还不行,因...

    13651657101 评论0 收藏0
  • 小白第一次在阿里云服务器上部署web项目

    摘要:久而久之,小白也想自己搭框架,自己在服务器上部署。阿里云服务器的申请首先是登录官网,注册账号,然后登录。在阿里云服务器上配置通过工具连接阿里云服务器,当然你也可以使用其他的工具比如类似的工具连接。到此,服务器上部署项目就完成了。做web项目开发的时候,以前都是大牛把框架搭建好,自己往里面写代码。久而久之,小白也想自己搭框架,自己在服务器上部署。所以在本地搭建了一个基于NetBeans+spr...

    Freelander 评论0 收藏0

发表评论

0条评论

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