Skip to content

nhat416/deno_blog

This branch is 14 commits behind denoland/deno_blog:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

06641e4 · Jan 19, 2023

History

65 Commits
Jan 16, 2023
Jul 10, 2022
Jan 16, 2023
Jul 23, 2022
Aug 29, 2022
Jan 15, 2023
Jan 19, 2023
Jan 16, 2023
Jan 15, 2023
Jan 14, 2023
Jan 14, 2023
Jan 14, 2023
Sep 13, 2022

Repository files navigation

Blog

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();

Getting started

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 dev

To ensure the best development experience, make sure to follow Set up your environment from the Deno Manual.

Configuration

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",
});

Preview

Customize the header and footer

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.

Hosting with Deno Deploy

To deploy the project to the live internet, you can use Deno Deploy:

  1. Push your project to GitHub.
  2. Create a Deno Deploy project.
  3. Link the Deno Deploy project to the main.tsx file in the root of the created repository.
  4. The project will be deployed to a public $project.deno.dev subdomain.

Self hosting

You can also self-host the blog, in such case run:

$ deno task serve

About

Minimal boilerplate blogging.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 100.0%