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:bot@deno.com" }, { 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