Blogging In EverWeb

Video Transcript:

EverWeb currently does not have a built in blogging feature, but a sophisticated and feature rich blogging feature is something that will be added to the application in the near future.

In the meantime, users who wish to have a blog on their website can easily do so by following the instructions in this tutorial. This type of blog creation is more manual and gives the user a lot more flexibility with their blog. I’m going to break this tutorial down into steps to make it a bit easier for you to follow along. There will be 4 steps in total, plus 2 optional steps, plus one bonus step.

Step 1

For users who have a custom theme, the first thing you should do is duplicate one of your website pages. You can do this by selecting the page and doing a secondary click and selecting Duplicate. On the new page, do a secondary click again, and then select Convert to Directory.

Alternatively, if you are using one of EverWeb’s built-in themes, click on the Add Directory button, and then select the Blank page from the theme you are using.

Let’s rename this page to Blog. You can give it any name you want but for this example, I will rename it Blog. I will also change the navigation menu display name to blog. I am choosing to include this page in the navigation menu. If you do not want to, you do not have to.

This page is going to feature snippets from each blog entry, with a link to the entire post. Before doing anything on this page, let’s create our first post.

Step 2

Each blog post is going to require its own page. Let’s duplicate another page, or add another blank page. Make sure that this page is located within the blog directory. Remember, you can move these pages in and out of the directory, so as long as this page is beneath and to the right of the blog directory, we know it is located within the directory.

The first thing we will need to do is change the name of this page. Let’s name this page today’s date, that way we can easily keep track of our blog entries. We should make sure to uncheck the option to include this page in the navigation menu. We do not want our individual blog posts in the navigation menu. Since we are not including it in the navigation menu, we don’t need to change the navigation menu display name, but if you would like to, feel free to do so.

We are now ready to make our first blog entry. Since a blog is just content, we can add anything we want to this page, but here are some best practices for blog entries. First, let’s start with a title.

Next, and this is completely optional, we can include the date of the entry and the author who is posting the entry. Again, this is not something you need to do, but is typically found on a blog, so if this is something you wish to include, go ahead, and if not, skip this step.

The next thing we can do is add our blog entry. Remember, you have the freedom to do this however you’d like. Here is an example of what I have added for my blog entry.

Step 3

Now that we are done with our entry, we need to finish up the main page for the blog. First, let’s select our blog entry title and copy it.

Now let’s go to our blog’s main page and paste the title. Next, let’s head back to the entry, and copy just a snippet of the beginning of the entry, and then paste it in the same text box as the entry’s title. At the very end of the snippet, type Read More, and then highlight that phrase. Click on the hyperlink tab in the inspector window, and then select Enable as hyperlink. Make sure One of My pages is selected in the Link To drop down menu, and then select the blog entry that you just created in the Page drop down menu.

If you want to edit anything, such as the font, the font size, or even the colours for the hyperlink formatting, do so now.

Step 4

There will come a time when you will want to add a second blog entry. To do this, do a secondary click on your first blog entry, and select Duplicate. Next, click on the newly duplicated page and then change the file name to today’s date, or whatever you would like to call it.

Next, we’re going to make our next entry. Since we have duplicated our previous entry, everything is fairly simple at this point. We can change the blog title to our new entry’s title. If you have a date on your blog, you can change it to today’s date. Then change the entry to be the entry of your new post.

When you’re done with your second entry, once again, copy the entry’s title. Now go back to your blog’s main page. Click inside the same text box that contains the snippet from your previous post. Paste the entry title that you just copied. Now go back to the latest entry and copy a snippet from the beginning of the entry. Next, go back to the blog’s main page and just beneath the title that you just pasted, paste the snippet that you just copied. Like we did in our first post, at the end of the snippet, type Read More. Highlight the phrase and then click on the Hyperlink tab. Enable as hyperlink, and then select the corresponding page from the drop down menu.

Remember, this page can be setup however you’d like. If you wanted to feature an image next to each blog snippet, you can do so by just making this text box a bit smaller, and then adding the image from your assets list as I am doing here.

Step 5 - Optional

Let’s fast forward to our 11th blog entry. This means that  our blog’s main page now has 10 entries on it. This number 10 is just an example. It can be 1, it can be 5, it can be 10, 20, 50, 100, whatever you want. At some point in time, this page will have too many entries on it and you will want to manage this. Here is what you can do. Do a secondary click on the blog’s main page and select duplicate.

Now, click on the new Blog page that appears in the list. Uncheck the option to include page in navigation menu. This page is now the archive page for your previous blog posts.

Click on the main blog page, and erase all the content so that is resembles a blank page.

Now, we’ll make our 11th blog post, just like we have done for the previous posts. When we are done with the post, we will add the blog snippet to the main blog page just like we have done in the past. The only difference now is that there will only be one post on this page. When we make our next entry, it will have 2 posts, and so on until we decide to do this again. But we will want our readers to be able to access our previous posts. So to do so click in the text box and at the very bottom of the box, type in Previous Entires. Highlight the phrase, and click on the Hyperlink tab. Enable as Hyperlink and select the archive blog page for the link. Now, users accessing our blog will be able to see the old entries by clicking on this link.

Step 6 - Optional

Sometimes, it can be helpful if we provide links in between each of our blog posts, so that users reading our blog for the first time can easily access each post in order. To do this, all we need to do is add Next Entry and Previous Entry text links at the bottom of each post. Make sure to link these text boxes to the correct blog post. This is an optional step, but if you’d like to do it, it will be helpful for the readers of your blog.

Step 7 - Bonus Step

If you want your readers to be able to interact with other readers, as well as yourself, a great way of doing this is through blog comments. Here is a very easy way of setting up this capability to your posts.

Visit disqus.com. Here is the URL for this website. Once there, click on the Add Disqus to Your Site button.

Proceed through the Disqus registration. Once registered, click on the Universal Code button. Click in the first box and highlight the code, and copy it.

Now, back in EverWeb, go to your blog post, and drag and drop the HTML Snippet widget onto the page. Paste the code that we just copied.

You will notice a large box appear, but you will only be able to see text reading ‘comments powered by Disqus’

This is normal and there is nothing to worry about. When you publish your site, you will be able to see the comments enabled. One thing I want to point out is that you will need to make this widget box longer as more and more comments are added, otherwise the bottom comments will begin to get cutoff. To start, you can make the box longer which will save you some time in the end. You can repeat this process with the exact same code on your other posts. Disqus is able to tell the difference between your different pages, so each page can have its own unique comment box.

So that is how you can have a blog in EverWeb. If you have any questions, please visit the EverWeb forum and discuss them with the EverWeb team, as well as the EverWeb community.