Taiyaki

April 05, 2020

published by: Yonseo

Build a website with Pico CMS

So you know html and css and you want to build a website without spending hours on coding one from scratch. There are alternatives out there such as wordpress but If you want to add a custom feature you need to code it yourself. Pico CMS is a content management system that is small, lightweight and gets you up and running. After all coding a website should be fun!

What am I learning?

How to build a blog using Pico CMS.

Topics:

  • download and install Laragon, Atom Code Editor
  • build a blog using Pico

All the code for this tutorial will be available at https://github.com/yonseo/pico_cms if you need to reference, copy/paste code.

Getting started with Pico CMS

1.) Download Laragon from https://laragon.org/download/. Laragon is a universal development environment and my local server.

2.) Download Pico zip file from http://picocms.org/download/ and extract it to your folder directory. I have named my project folder code2college. Your project folder must be saved in the laragon > www directory to work with laragon.

no image found

In Laragon set your Document root to point to your project folder.

no image found

Start the local server and go to http://localhost in a browser.

no image found

3.) I need a code editor to edit web pages. Atom code editor is a great and free code editor https://atom.io/. After installing Atom open your content folder and create a index.md file. The index.md file inside the content folder is your homepage. You can type html code in your webpage. Before I do that I will type the meta information:

---
Title: Blog
Description: A website for active dogs who need jobs
Author: Your Name
Date: 2001-04-25
Robots: noindex,nofollow
Template: index
---

no image found

4.) Now lets make a blog folder inside the content folder. Inside the blog folder create a index.md file. Again type the following code but this time I will change the template to blog-index.

---
Title: Blog
Description: A website for active dogs who need jobs
Author: Your Name
Date: 2001-04-25
Robots: noindex,nofollow
Template: blog-index
---



no image found

Pico uses Twig templates to display a view to webpages. The default template in the themes folder is index.twig. I need to create a template named blog-index.twig. To do that copy the file index.twig from themes > default and rename it to blog-index.twig. Now add the following code snippet inside the container as shown in the picture outlined by a red box.

no image found

5.) Finally we can make a blog post. All my blog posts will be saved inside my content > blog folder and named with a .md extension. Like before I have changed the template to blog-post. I have to create a twig template named blog-post.twig in the themes folder because it does not exist. Copy index.twig and rename it to blog-post.twig

no image found

You can access your blog at http://localhost/blog. When you click on your blog post to open it what you will see is what is displayed on line 10 shown on the above image.

no image found

Themeing

Copy and paste the folder named default. Then rename it to feather. This is the name of the new theme.

no image found

I need to change the theme for the website to use the feather theme. I can change it in the config.yml.template file.

no image found

Creating thumbnails for a blog!

You don't need to be an expert at photography. The little things in life are the most valuable. I took a picture of a can of Pandan Jelly and turned it into a graphic image for my blog.

no image found

I don't want to spend a lot of time on creating a thumbnail since that time can be spent on writing and editing a blog post. Find a color theme that you like and go with that. For this picture I took the cube jelly, duplicated it, and threw some color over it and added a title. I'm using sketchbook pro which is a free app for IOS/Windows/MAC.

no image found

#github #console #commands

Last edit: 2020-04-11