Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Start your own blog/site with Podlite for Web
Alexandr Zahatski
Alexandr Zahatski

Posted on • Edited on • Originally published atzahatski.com

     

Start your own blog/site with Podlite for Web

Recently I released the toolPodlite for Web which helps to create websites and blogs using the markup languageRaku Pod (also known aspod6). It replaces my previous engine based ongatsby.

I want to give you little tips to help you create your own website/blog.

Installation

For startup you needyarn should be installed.Podlite-web is also available as Docker image.

First you checkout the repo and start the development server:

git clone git@github.com:podlite/podlite-web.git cd podlite-webyarn && yarn dev
Enter fullscreen modeExit fullscreen mode

And after open URL:http://localhost:3000/

Default welcome page

This is the default page. The sources of this page are available in thepub directory. You can edit the filepub/index.pod6 and see the changes.

Blog example

You can also explore theexamples directory and check use cases.

The most useful example isexamples/03-blog.

Run blog example

To play with it, add the variablePOSTS_PATH:

POSTS_PATH='examples/03-blog' yarn dev

or using docker:

cd examples/03-blogdocker run -it --rm -v ${PWD}:/app/pub -p 3000:3000 podlite/podlite-web dev
Enter fullscreen modeExit fullscreen mode

And then open the URL:http://localhost:3000/

preview

Files structure

Let's look at this in detail.

examples/03-blog contains the following files:

├── about.pod6     # static /about page├── blog-post.pod6 # example of a blog post├── content.pod6   # /contents page with TOC for blog at all├── index.pod6     # this is an index file of the website├── journal.pod6   # file with selectively published notes ├── logo.png       # image used for :favicon and in =Image block├── now.pod6       # static /now page└── styles.css     # css for custom styles
Enter fullscreen modeExit fullscreen mode

Index page

The fileindex.pod6 is the same as the fileindex.html for a normal website. This is the root file for the website and also the configuration for the website in general.

Let's see the=pod section from the example for this:

=begin pod  = :favicon<./logo.png> = :puburl<http://example.com> = :globalStyles("./styles.css")  =TITLE Podlite-web Starter Blog  ... =end pod
Enter fullscreen modeExit fullscreen mode

The following configuration options for the=pod block are used :

Site configuration attributes

namedefault valuedescription
:favicon../src/favicon.pngfavicon for the website, used only in C. The value is the relative path to the image.
:puburlnoneurl for this file. For 'index.pod6' is the address of the public website. Can be overridden by the C environment variable.
:globalStyles@Styles/defaultcustom CSS styles for the website, used only in C.

The semantic block '=TITLE' is used as the site title.

Create static pages

Each static page has a fixed URL. This is possible with the:puburl attribute for the=pod block. For example, let's look atabout.pod6:

=begin pod :pubdate('2022-08-08 23:00:00') :puburl</about>=TITLE About page=end pod
Enter fullscreen modeExit fullscreen mode

withpubdate - is needed to indicate that this page is publicly available from a certain date. Pages withoutpubdate will be skipped when published.

Blog posts

Pages withoutpuburl are treated as blog posts and the URL is generated based on the publication date.

For example:

=begin pod :pubdate('2012-08-08 23:00:00')=TITLE Blog post  =end pod
Enter fullscreen modeExit fullscreen mode

will be available at url/2022/8/6/1/blog-post.

The=TITLE block is used for the public URL and as the page title.

Publish notes

It is also possible to create a blog note from any=para block. Let's look at the filejournal.pod6.

=begin pod  =TITLE This is a journal  I write down my thoughts here, but I only want to share a few  =for para :pubdate('2022-07-04 14:00')Lorem Ipsum is simply dummy text of the printing and typesetting industry. LoremIpsum has been the industry's standard dummy text ever since the 1500s, ...=for para :pubdate('2022-08-05 14:00')It is a longestablished fact that a reader will be distracted by thereadable content of a page when looking at its layout.....
Enter fullscreen modeExit fullscreen mode

As you can see,journal.pod6 can be a diary, some entries of which can be published in a blog. Butjournal.pod6 remains unpublished: there is no attributepubdate in=pod section.

Other features

Linking pages

Let's first create a link to the info page. For this we use theL<> formatting code:

Please check L<About page|file:./about.pod6>

This link between files becomes a web link on the website. Links to files are converted to links between web pages when they are published.

It be rendered as:

<a href="/about">About</a>

Link to file with blog post:

This is a link to L<blog-post.pod6| B<file:./blog-post.pod6>>
Enter fullscreen modeExit fullscreen mode

converted to :

<p>This is a link to <a href="/2022/8/6/2/blog-post">blog-post.pod6</a></p>
Enter fullscreen modeExit fullscreen mode

React support

It is possible to integrate Pod with React components. We'll show you how to add theContents of blog component to the page:

# Here we import the component _Contents_ from the library =useReact  {Contents} from '@Components/service' # Somewhere on the page run this component with parameters =begin React :component<Contents> :locale<en>=end React
Enter fullscreen modeExit fullscreen mode

The content of the blog is rendered as follows:

Use React component on page

All Pod blocks are passed as childs to the React component. It is possible to mix the pod markup with the logic.

For example, to create a multi-column layout, you pass each column as a Pod block to the React component. The following example shows the site menu:

=useReact {HeaderCol} from '@Components/service'=begin React :component<HeaderCol> :id<menu>  =para L<About|file:./about.pod6> =para L<Now|file:./now.pod6> =para L<Table of contents|file:./content.pod6> =para L<github | https://github.com/podlite> =para L<twitter | https://twitter.com> =end React
Enter fullscreen modeExit fullscreen mode

It showing on the following screen:

This is the menu rendered by the React component<br>

RSS, Sitemap

Rss feed and sitemap are generated automatically.

Publish results

Podlite-web make zipped archive of result by the following command:

yarn export-zip > file.zip

You can unzip the file and transfer the contents to almost any hosting provider to make your website live.
Usage of Podlite for Web
Usage of Podlite for Web

Useful links

I look forward to your feedback on thePodlite GitHub issue page . Or just write me to zag(at)cpan.org with your ideas!

Thank you!

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

  • Joined

More fromAlexandr Zahatski

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp