Creating single-user blog in Drupal
Here is the step-by-step description of the standard procedure to set up a (single-user) blog in Drupal 7 from scratch.
The general points (from Drupal 4.7.* onward) is covered in
Single user blog - basic
in Drupal.org. For Drupal 6,
How To Create A Blog With Drupal
(by Alex Fisher) is a good guide.
The following is for Drupal 7.
Note the multiple-users blog is out of scope of this article. For multiple-users blog, the built-in Blog module is the standard in Drupal 7, although considering it will not be included in Drupal 8, which will come out some time soon (at the time of writing, October 2014), it is debatable if it is a good idea to use the Blog module.
Here I am assuming you have already installed Drupal (in English), along with the SQL database, to which Drupal can access, and the working HTTP server (most likely, Apache), and you can access to your webpage and can log in as the administrator. You may have installed (and enabled) other modules already. That is fine, but in that case the following descriptions might not be applicable in literal sense in some parts, depending on the other modules you have enabled and the settings.
What are we going to achieve?
Fist, let's clarify what we are aiming for. Blog is a vague term. Here is the list we will achieve in the followings. All of those things are configurable later — this post gives you just a kick-start!
- There are three types of pages, that is, the frontpage (Home),
an index page for all the blog entries (Blog), and
a page per each blog entry.
- The index page of all the blog entries (Blog)
- It lists the most recent blog posts with their titles, dates, and teasers. The title is a link to the page of the complete entry of the post.
- Its URL is: http://www.example.com/blog
- The frontpage (Home)
- It is similar to Blog index page, but contains an additional banner.
- Its URL is: http://www.example.com/
- Each blog entry
- The title is displayed as a major heading, together with the creation date and author, followed by the full content.
- Image(s) can be displayed at the top.
- After the main text, the list of tags for the blog entry is displayed.
- After the main text, there are the hyperlinks to the previous and next posts.
- Visitors can leave a comment, which will be published below the main text.
- URL of each blog post is like: http://www.example.com/blog/how-one-designs-blog
- The site-administrator (User-name: admin) will post each blog-post.
- Each blog post has
- one or more tags. Visitors can view all the blog posts that contain a certain tag,
- the Previous and Next links to the previous or next post.
- All the pages have/show
- the main menu bar, which contains Home and Blog tabs.
- The Home tab is a link to the front page.
- The Blog tab is a link to the Blog page, which lists the most recent blog posts.
- a side bar, where a search box is available.
- its breadcrumbs.
Breadcrumbs are a list of strings that show where the page is in the tree-type category of the entire site.
For example, a page in a website may have breadcrumbs like:
Home > Food > Vegetable > Onion
- the main menu bar, which contains Home and Blog tabs.
Basic strategy
Drupal 7 has a good support for blog-type posts in its core (which is very different from Joomla! for example). The main text of each blog entry is saved in the database, which Drupal directly controls; this means if you need migrate your blog to another CMS system or database in the future, it will be fairly straightforward, as it does not depend on any specific module. Posting comments by anonymous visitors are supported by the core, though disabled in default. Teaser view, that is basically either the summary or glimpse of each blog post, is supported in default.
The single-user blog is one of the core features in Drupal. That is, as I understand, why there is no specific module for it. However, Drupal is, unlike WordPress, not specifically devoted for blogs, but offers a much more general framework for wide-range websites. Each developer with Drupal uses and combines the modules (whether they are a part of the core or developed by third-parties), and achieve their preferred style of blogs.
In our simplified case, to achieve the above-mentioned list, here is the strategy:
Index page
The hyperlink to the new blog entry should be automatically added at the top of the index page. In other words, you don't manually add the link to the index page every time you add a new blog post.
To achieve this, we use Views module (which is the bog-standard module for any Drupal 7 sites and will become a part of the core in Drupal 8).
Content type
In Drupal, there are two types of pages: node
and anything else.
A node
refers to a (perhaps document-like) standard content,
which are mostly static, whereas the other includes the index pages,
user-account setting pages, search-result pages and so on, which are
usually dynamically created when requested.
Each blog entry is naturally a node, whereas its index page is usually
not a node, as the index page is dynamically generated when requested,
referring to all the nodes available in the database in the given category
and sort them in a certain way, such as, chronologically, before
displaying as the list (though it is entirely possible to create
a static index page as a node, which you edit every time a new post
comes out or an existing post is updated).
Every node in Drupal belongs to a single content-type. Content-type is the most basic way in Drupal to categorise the nodes.
A Drupal site can have an arbitrary number of content types. In default, two content types are available: Basic and Article. The Basic is meant to be for the static pages like the description of the author, whereas Article is for time-critical posts.
In our case we will create another one, and name it Blogpost
.
It is well possible to use the existing Article content type.
However, it is generally speaking a good practice to assign a devoted content-type for a major category in a website, and so do we.
Path alias
In default, the paths (URL/URI) of a page in a website in Drupal are like
/node/1234
.
In general, it is not an advisable way.
For example, you may want paths for a blog post on your website to be like
http://www.example.com/blog/SOMETHING
,
where SOMETHING
may represent a date of the entry, title, or both or else.
In particular, when the path (URL) for the blog index-page is blog
,
it may feel odd if the path for each blog-entry is like /node/1234
.
Also, this node-type path with the sequential number tends to be penalised
by search-engines.
In Drupal, it is possible to set its (perhaps more human-readable) path manually every time you post or edit a new entry, and is called path alias
.
The node-type path is still available (in default) regardless whether the path alias is defined for it or not.
The thing is, as long as the path is unique and reasonably human-readable for each entry, probably it does not matter much what exactly each path is. We will use the Pathauto module to automatically set the path-alias every time a new entry is created.
Time-ordered hyperlinks
Blog posts are usually arranged in order of the creation times like diary. So, it would be good to have the links to previous and next posts in each blog entry so that visitors can read on entry after entry without going back to the index page after every post.
There are several modules available for this purpose, that is, to add the hyperlinks to the previous and next blog-posts in each entry. The bottom line is you do not need know the path of the previous and next blog-posts for each post, nor edit the second most recent post to add a hyperlink to the newest one, every time the new entry is created. In our case we use one of the most basic and simplest modules: Flippy
Taxonomy
Taxonomy in Drupal means sets of vocabulary, and each vocabulary has either fixed, or an unlimited number of, terms. They are usually used to categorise the nodes (contents) in a website(s). Each content-type can have an arbitrary number of vocabularies, and each node can have an arbitrary number of terms (if the vocabulary allows).
Does this sound confusing? I understand! It did to me, terribly, before I worked it out later at last… In a way you don't need it until you feel the need or desire to categorise neatly the contents of your website — maybe not now, yet?
In our case, it is very simple. We use just one vocabulary, named Tags, which is available in default. Each blog-entry can have an arbitrary number of terms (keywords) in Tags. With this tags, visitors can view all the blog entries that have a certain keyword, if they wish.
Breadcrumbs
Although the basic breadcrumb functions are available in default, its functionality is limited. Instead we will use Custom Breadcrumbs module.
Miscellaneous: Theme, Block, Comments etc
The theme controls how the website and each page appears overall. We use one of the two default themes, Bartik.
In default in Drupal, each component in each page, such as the slogan of the website, menu bar and main content, is rendered, depending how the Blocks are configured. We will configure Blocks.
Comment functions are available in default in Drupal. So is the teaser for each entry. We use the standard Drupal functionalities for them.
Installing and enabling required modules
Installing
First, install the following modules.
- Chaos Tools (a basic library required by many modules, including Views)
- Token (a basic library, required by many modules, including Pathauto and Flippy)
- Views
- Pathauto
- Flippy
- Custom Breadcrumbs
As an added note the following two modules are I found very useful for administrative works in any Drupal sites. You may want to install and enable them (but in the following example screen shots, I do not use these modules).
- Admin Menu (to help administrator organise the menu)
- Module Filter (to help administrator organise the modules)
By far the easiest way to install these modules is to use drush
.
chdir
to your Drupal directory, and just run:
If you don't use drush,
the GUI-based way is as follows: Login your website (say, http://www.example.com/)
as the administrator, then click the menu
Modules
at the top and then click the link
near the top,
or instead just open the path Install new module
/admin/modules/install
under your domain.
Find the compressed file for each module at the Drupal website (see
the links above), for example,
http://ftp.drupal.org/files/projects/token-7.x-1.5.tar.gz
then type the URL in the form
in the page, and
press the button.
Install from a URL
The command-line-based way is as follows.
Repeat this for all the modules to install. The Drupal-root directory
of your site is referred to as /DRUPAL-ROOT/
here, which can be
~/public_html/
, or
~/Sites/
, or else (as you have installed Drupal).
- Download the compressed module file to one of your local directories, say,
~/Downloads/
- Uncompress the file into the
/DRUPAL-ROOT/sites/all/modules/
For example, open a terminal and run the followings (without %):
% cd ~/Downloads/
% tar xvfz token-7.x-1.5.tar.gz
% mv -i token /DRUPAL-ROOT/sites/all/modules/
Enabling
Now, you need to enable the required modules. Note a module package (downloaded as a single compressed file) often contains more than one module.
Again, by far the easiest way to enable them is via drush
.
chdir
to your Drupal directory, and just run:
The GUI-based way is to click the admin menu Modules
(or open /admin/modules
), click the above-mentioned modules to enable,
and don't forget to press the button at the bottom.
Note: do NOT enable Blog
module.
It is for blog with multiple-authors (for Drupal 7 only), hence
we are not going to use it.
Now, the first step is completed. The rest will be done on your website. Open your website and login as the administrator (if you have not done, yet).
Editing Site information
.
In this case, Drupal is installed in the sub-directory in the local server.
Most basic settings
First configure the most basic settings (you may have already done some of them).
Click the admin menu Configuration
and then
Site information
.
Alternatively, open the path: /admin/config/system/site-information
Then edit as follows (if you haven't done that, yet).
- SITE DETAILS: Site name, Slogan, E-mail address
- Set appropriately. Note this email address is the site-wide default email address and can be different from that of the administrator.
- FRONT PAGE: Number of posts on front page
- Default is 10. Set it as 2, for example.
- FRONT PAGE: Default front page
- Default is
node
. Delete it, namely, leave it empty.
And, don't forget to press the
button at the bottom.Creating a new content type: Blogpost
Click the admin menu Structure
, then
Content types
,
then click the link
near the top.
Alternatively, open the path: Add content type
/admin/structure/types/add
.
Then edit as follows.
First, at the first form Name
,
type Blogpost
(without quote-marks).
Then save it, by pressing the button
near the bottom. Then you will see the new content-type
is listed as one of the content-types.
Blogpost
Next, click
in the row of the content-type manage fields
Blogpost
.
Here you are configuring what field each content/post contains.
At the bottom row in the table (titled as
),
the middle form is a drop-down list, showing Add existing field
.
Choose - Select an existing field -
, and click button at the bottom.
It will take you to another configuration.
No need to update (unless you want to), but just scroll down and press the button of at the bottom.
Image: field_image (Image)
Now you are brought back to the
configuration
screen and you see the new manage fields
is added under Image
.
Body
Repeat the process, but instead of
(which is anyway not available
any more, as you have already used it), choose
Image: field_image (Image)
, and save.
Term reference: field_tags (Tags)
The 5 rows in the table (Title, URL path settings, Body, Image, Tags) are what you can input every time you add or edit the content (post) of this type Blogpost.
Now, near the top there are a few tabs, and the middle one is MANAGE DISPLAY
. Click it.
Now in the main table, the 3 rows are
, Body
and Image
in this order.
Move the mouse pointer over the cross sign just left of the word Tags
.
Then you can press and drag the Image
row above Image
. Let's do so.
Don't forget to press the button .
Body
The 3 rows in the table (Image, Body, Tags) are what are displayed in this order to the browser when a visitor view the content;
n.b., the title is displayed above anyway.
It is the default view. You can further configure what the teaser looks like by clicking Teaser
tab near the top-right corner (below the main tabs).
Let's leave it for now.
Configuring Pathauto
Pathauto will automatically set the path-alias when you create a new node (blog entry). But you need to configure to make it happen.
Click the admin menu Configuration
and then
URL aliases
, or open the path: /admin/config/search/path
One of the tabs near the top is PATTERNS
. Click it.
At the bottom in the series of the first forms (
),
it is the form for "CONTENT PATHS
Pattern for all Blogpost paths
".
Input "blog/[node:title]" and
press the button near the bottom.
Now, the default path for any Blogpost contents will be under
/blog/
directory and the filename is something derived from the title of the post.
Note you should not insert a forward-slash "/" at the head. That is a general specification in the Drupal system.
Next click another tab: SETTINGS
.
Note some of these tabs appear only when Pathauto
module is enabled.
That is how the modules of Drupal work — a module may add choices in configuration, structure and/or permission.
In the section of Update action
, tick "Create a new alias. Delete the old alias.
" if it hasn't been ticked.
Press the button .
The background of this setting is as follows. Once a path-alias is created, if it ever changes while the old one is left, the old one can be very annoying, as it can pop up when you don't want it to. And, unless the Pathauto modules deletes it, you may not be able to delete it without directly accessing to the SQL database (See a bug report on drupal.org). For that reason, it is my recommended setting.
If you have been using a path-alias for a long time but need to change it to a new one, I recommend to redirect the old to new one (with HTTP 403), using the Redirect module. By doing so, there would be no deadlink, or no confusion as a result of co-existence of those two old and new aliases for the equal measure, and the search engines would register the new one, discarding the old one.
Now Pathauto creates the path-alias based on the title of the content, with the words connected with a hyphen in between in default. You can configure it if you like.
Create your first blog post!
Now, you can create your first blog post!
Click the admin menu Content
and then
.
Alternatively,
go to the front page (like http://www.example.com/) as the administrator
and click Add content
in the main page or the side panel.
Add [new] content
Click Blogpost
, which is the content-type of your blog.
Here, you can edit as you like. For now, input "My first post"
as the Title (the first form near the top), write something in the Body.
Next, immediately above the table near the bottom, there is a form
for Tags
. Input "fruit, red" here.
Press Preview
near the bottom.
If you are satisfied, press Save
near the bottom.
Congratulations! Your first blog post is now made and available,
as you see.
The path (URL) is http://www.example.com/blog/my-first-post
(replace the domain name with yours).
Go to the frontpage. You can see the teaser of the blog post (if the main body of your blog post is very short, the teaser can be almost the same as the entire article). If you click the title of the teaser entry or the "Read more" link, you can view the full post.
Now if you logout and view the same page, it will look slightly differently. That is how anonymous visitors would see your website and page. Login back as the administrator, and continue working.
Create your second blog post
Now, let's create one more post.
This time it will be titled as "My second post".
At the Tags field, input "fruit, yellow".
You would notice, as soon as you type "f",
the help of "fruit" appears. Because the tag (term) of "fruit"
already exists in the vocabulary Tags. At the same time, you can add any new word ("yellow"
in this case) to the tags. It is how you configured (by leaving it as default)
in the content type. Alternatively, you can forbid to add a new word to
the Tags and restrict to use only the existing ones
(at /admin/structure/types/manage/blogpost/fields/field_tags/widget-type
, which can be navigated from the Structure
admin menu.)
After saving the content, you will see the new blog post.
You can see two "Tags" (fruit
and yellow
) below the main body.
Click "fruit", and you will see the teasers of the two blog posts, as both have the tag of "fruit".
Clicking "yellow", you will see only the second post.
That is one of the ways Tags can be used.
Setting up the links to previous and next posts
Click the admin menu Structure
, then
Content types
, then "edit
" in the row
of Blogpost
, or
just go to /admin/structure/types/manage/blogpost
.
Scroll down and find the tab of "Flippy settings
"
in the tab-list at the left-hand side of the table near the bottom. Click it.
Then tick "Build a pager for this content type
".
Many further options appear, but ignore it for now, and save the change
(by pressing the button ).
Note you could have done this when you first created the content-type. We didn't simply for the sake of the flow of the explanation.
Now view your first blog-post
(http://www.example.com/blog/my-first-post
)
and you see the link to "Next" appears
below the main text.
If you click it, you will see the second post as you would expect.
Blog index page — Views
Now we are creating the index page of all the (recent) blog posts. We use Views module for it. The Views module is one of the most flexible and powerful modules in Drupal. Unfortunately that means the configuration is quite complex, as you have so many choices.
Click the admin menu Structure
then Views
,
or simply go to /admin/structure/views
.
In the table, find the row of "Front page".
At the right-most column (OPERATIONS), click the down-pointing
arrow just right of the word Enable, to reveal the drop-down list,
and click Clone.
The screen will change, and input Blog-index
in the form (View name
). Press button.
This is the name for the administrators.
Now, the next screen is for the main configuration of this Views. Edit it as follows:
Near the top-left corner of the main table, there is a row of "
Display name: Page
". Click "Page
", and change theName
fromPage
toBlog
. This is the word displayed as the title of the index page.-
Next, in the left column of the table, find the section
FILTER CRITERIA
, and clickAdd
next to it on its right. TickContent: Type
in the pop-up window, and press the button near the bottom. In the next pop-up window, in the section ofContent types
, tickBlogpost
(One of must be ticked in the left-hand box in default), and press the button near the bottom. You now see a new criterion of "Content: Type (= Blogpost)
" added to theFILTER CRITERIA
. This means this Blog-index View will show the content-type of Blogpost only. -
At the top of the middle column of the table, it is the
PAGE SETTINGS
section. The first row isPath: /frontpage
. Click/frontpage
, and replace the wordfrontpage
withblog
. press the button . This is the path (URL) of this View page. -
At the top of the middle column of the table, the row below the previous one (now
Path: /blog
) isMenu: No menu
. ClickNo menu
, and tick "Normal menu entry
" in the pop-up window. Other forms will appear to the right. Input in theTitle
form: Blog. Choose "Main menu
" in the drop-down section ofMenu
. Press the button . - Press the button near the top.
Now, open
http://www.example.com/blog
and you will see the collection of teasers of your blog posts.
Main menu adjustment
Now, you see Blog
tab is added in the main menu.
But probably it is the left-most tab and Home
tab
is on its right. You may want to swap the positions.
Click the admin menu Structure
then Menus
,
or simply go to /admin/structure/menu
.
The first row must be Main menu
.
Click list links
in the row.
The order of the item in the table you see now is that in the main-menu bar.
Now drag and drop the cross mark at the head of rows
to swap the positions of Blog
and Home
.
Press the button .
Browse any page (you may need to reload it) and you can see the order of the links in the menu has changed.
Tweaking the front page
Now that the Blog index post is created, it is actually very similar to the front page. Let's differentiate them by adding an extra welcome message at the top of the front page.
Click the admin menu Structure
then Blocks
,
or simply go to /admin/structure/block
.
The BARTIK
tab must be activated near the top-right corner.
If you click the word
near the top of the page, you can see how the blocks are named and arranged
for the Bartik theme.
In this case we shall use "Featured" block for our purpose.
Different themes have different block names and arrangement.
So, if you choose a different theme, you are likely to reflect
the configuration of the blocks accordingly.
Demonstrate block regions (Bartik)
First, click the word
near the top
just below the word Add block
.
Then, configure as follows:
Demonstrate block regions (Bartik)
- In the second form "Block description", write Welcome banner
- In the main form "Block body", write a message of your choice, for example, Welcome to my website!
- In the main form "Block body", write, for example, Welcome to my website!
- In the
REGION SETTINGS
section, for theBartik (default theme)
drop-down list, chooseFeatured
- In the
Visibility settings
(the table with multiple-tabs, near the bottom of the page), in thePages
tab (open in default), tick "Only the listed pages
" and input in the form below: <front> (n.b., both ”<“ and ”>“ are indispensable) - Press the button at the bottom.
Go to the front page (reload it), and you can now see the welcome-banner, whereas it is not displayed in any other page.
Configuring Breadcrumbs
Here we are configuring the breadcrumbs, using the Custom Breadcrumbs module. So far, if you view any page but the front page, the word Home is displayed near the top-left corner, and it is actually the default breadcrumb. That is not very helpful. Custom Breadcrumbs is a pretty flexible and powerful module: in other words, a quite complicated module to configure. Let's set it up and make it right.
Click the admin menu Configuration
and then
Custom breadcrumbs settings
, or visit
/admin/config/user-interface/custom-breadcrumbs
.
Configure as follows:
- At the checkboxes in the section of
PAGE TITLE
, tick both
andAppend page title
.Use plain text page title crumb
- In the section of
MENU STRUCTURE
, tick
, and highlight everything in theUse the menu structure to set the breadcrumb trail
Menu name
below. - In the section of
TAXONOMY STRUCTURE
, tickUse the taxonomy hierarchy to set the breadcrumb trail for nodes and taxonomy pages
Show vocabulary in breadcrumb trail
Show current taxonomy term in breadcrumb trail for node pages
Show current taxonomy term in breadcrumb trail on the taxonomy term page
- Immediately below it, for the radio button of
in the section ofInclude or exclude taxonomy-based breadcrumbs for the following node types
TAXONOMY STRUCTURE
, tickInclude
. - Press the button at the bottom.
Custom Breadcrumbs Configuration panel in /admin/config/user-interface/custom-breadcrumbs
. Note this module must be configured in both Configuration
and Structure
.
Next, navigate from the admin menu Structure
Custom Breadcrumbs
, then click the top-right tab of Node
,
or simply go to /admin/structure/custom_breadcrumbs/node/add
.
Then configure as follows:
- In the
Node type
drop-down list, selectBlogpost
. - In the
Titles
, input Blog - In the
Paths
, input blog - Press the button at the bottom.
Now the configuration is complete.
Visit (and reload)
http://www.example.com/blog/my-first-post
or
http://localhost:8888/sandbox/tags/fruit
and see how the breadcrumbs are displayed.
Adjusting permissions for general visitors
At the moment, some facilities are available or unavailable for the general anonymous users. In this section, we adjust the permissions.
Enabling Search
In Drupal 7, the searching facility is not available for general visitors in default. That is why the search-box is seen when viewing the page logged in as admin, but it does not appear when viewing after logged out.
It is controled in the Permission section.
Click the admin menu People
then the top-right tab
PERMISSIONS
.
or simply go to /admin/people/permissions
.
At the rows of
and
Use search
tick the boxes for both
Use advanced search
and AUTHENTICATED USER
.
Don't forget to press the button at the bottom.
ANONYMOUS USER
The search box is enabled in the side-bar in default, so now any visitor can use the searching facility over your website.
Accepting and publishing comments for each post from anonymous users
Click the admin menu People
then the top-right tab
PERMISSIONS
.
or simply go to /admin/people/permissions
.
Tick the box in the row of
for Post comments
.
You may also want to tick the box for
ANONYMOUS USER
.
In default, any comment by anonymous visitors is moderated
by the administrators.
Skip comment approval
Not to mention, accepting comments from anonymous visitors may invite spam comments. Even if the moderation is required to post a comment, many spam comments can be posted and the job of moderation may become impractical.
There are many ways to prevent or reduce spams. In Drupal, Honeypot is one of the popular ones and is much less intrusive than CAPTCHA. Obviously you may simply want not to accept any comment in the first place.
Disabling User Login
For your personal blog site, you may not want or need a random visitor to (attempt to) register or login to your website. You are perhaps the only developer and authenticated user. In default, Drupal 7 shows the User-login block in the side bar. Let's hide it.
Click the admin menu Structure
then Blocks
,
or simply go to /admin/structure/block
.
block is at
User login
region.
In the second-column (Sidebar first
REGION
) drop-down menu,
select
Press the button at the bottom.
- None -
Once you log out, you don't see the User-login block, but a search box in the side-bar.
Not to mention, you can not login as the administrator
by navigating from the public website, either.
No need of panic, though. Just access to
http://www.example.com/user
and login. The public page does not contain the link to the gateway
as you have designed, nevertheless the login page is still available
if you directly access it.
What's next?
It is entirely up to you!
For example, you may want to customise how your website looks — use a different theme. You may want to add share-buttons with SNS. How about adding images in the places you like in a post? Or, you may want to add the follow-up notification of additional comments by email for any one who has left a comment. One of the first things I would do is to create a devoted blog editor account for the single-user (myself), who will edit and publish blog articles but can not do anything else, so that s/he (or I) wouldn't (couldn't) accidentally break down some important configuration of the website. And so on and on. It is entirely up to you!
Most of the popular features you see in many websites can be achieved with suitable modules, which you can perhaps find in drupal.org.
Look for one. Alternatively, you can always develop your own module.
You could even modify the Drupal core (though a private modification is not recommended, as any future update of the Drupal core may break down everything!).
Drupal is an extremely flexible CMS.
Have fun!
Finally, if you find this document to be useful (or incorrect somewhere), and then leave a feedback in the comment-area below (or contact me), I will greatly appreciate it!