Minimal boilerplate blogging. All you need is one boilerplate JavaScript file that has 2 lines of code:
import blog from "https://deno.land/x/blog/blog.tsx";
blog();To initialize your own blog you can run following script:
$ deno run -r --allow-read --allow-write https://deno.land/x/blog/init.ts ./directory/for/blog/This command will setup a blog with a "Hello world" post so you can start writing right away.
Start local server with live reload:
$ deno task devTo ensure the best development experience, make sure to follow Set up your environment from the Deno Manual.
You can customize your blog as follows:
import blog, { ga, redirects } from "https://deno.land/x/blog/blog.tsx";
import { unocss_opts } from "./unocss.ts";
blog({
author: "Dino",
title: "My Blog",
description: "The blog description.",
avatar: "avatar.png",
avatarClass: "rounded-full",
links: [
{ title: "Email", url: "mailto:[email protected]" },
{ title: "GitHub", url: "https://github.com/denobot" },
{ title: "Twitter", url: "https://twitter.com/denobot" },
],
lang: "en",
// localised format based on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
dateFormat: (date) =>
new Intl.DateTimeFormat("en-GB", { dateStyle: "long" }).format(date),
middlewares: [
ga("UA-XXXXXXXX-X"),
redirects({
"/foo": "/my_post",
// you can skip leading slashes too
"bar": "my_post2",
}),
],
unocss: unocss_opts, // check https://github.com/unocss/unocss
favicon: "favicon.ico",
});
By default, we render the header and footer with builtin template using the blog settings. You can customize them as follows:
/** @jsx h */
import blog, { h } from "https://deno.land/x/blog/blog.tsx";
blog({
title: "My Blog",
header: <header>Your custom header</header>,
showHeaderOnPostPage: true, // by default, the header will only show on home, set showHeaderOnPostPage to true to make it show on each post page
section: (post) => (
<section>Your custom section with access to Post props.</section>
),
footer: <footer>Your custom footer</footer>,
});Beware to use .tsx extension to this extent.
To deploy the project to the live internet, you can use Deno Deploy:
- Push your project to GitHub.
- Create a Deno Deploy project.
- Link the Deno Deploy
project to the
main.tsxfile in the root of the created repository. - The project will be deployed to a public
$project.deno.devsubdomain.
You can also self-host the blog, in such case run:
$ deno task serve
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent