コメントを追加

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

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.

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).

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 Install new module near the top, or instead just open the path /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 Install from a URL in the page, and press the Install button.

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).

  1. Download the compressed module file to one of your local directories, say, ~/Downloads/
  2. 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 Save configuration 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).

Screen Shot: Site Information

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 Save configuration button at the bottom.

Creating a new content type: Blogpost

Click the admin menu Structure, then Content types, then click the link Add content type near the top. Alternatively, open the path: /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 Save content type near the bottom. Then you will see the new content-type Blogpost is listed as one of the content-types.

Screen Shot: Content-type created

When a new content-type Blogpost is created.

Next, click manage fields in the row of the content-type Blogpost. Here you are configuring what field each content/post contains. At the bottom row in the table (titled as Add existing field), the middle form is a drop-down list, showing - Select an existing field -. Choose Image: field_image (Image), and click Save 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 Save settings at the bottom.

Now you are brought back to the manage fields configuration screen and you see the new Image is added under Body.

Screen Shot: Content-type: Manage-fields

Just added Image field in manage fields, while creating a new content-type: Blogpost.

Repeat the process, but instead of Image: field_image (Image) (which is anyway not available any more, as you have already used it), choose Term reference: field_tags (Tags), and save.

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, Image and Tags in this order. Move the mouse pointer over the cross sign just left of the word Image. Then you can press and drag the Image row above Body. Let's do so. Don't forget to press the button Save.

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.

Screen Shot: Pathauto configuration

Pathauto module configuration.

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 (CONTENT PATHS), it is the form for "Pattern for all Blogpost paths". Input "blog/[node:title]" and press the button Save configuration 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 Save configuration.

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 Add content. Alternatively, go to the front page (like http://www.example.com/) as the administrator and click Add [new] content in the main page or the side panel.

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.

Screen Shot: Preview of a new content

Previewing the first blog-post before saving.

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 Save content type).

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.

Screen Shot: Creating new Views

Creating new Views by cloning Frontpage.

The screen will change, and input Blog-index in the form (View name). Press Continue button. This is the name for the administrators.

Now, the next screen is for the main configuration of this Views. Edit it as follows:

  1. Near the top-left corner of the main table, there is a row of "Display name: Page". Click "Page", and change the Name from Page to Blog. This is the word displayed as the title of the index page.

  2. Next, in the left column of the table, find the section FILTER CRITERIA, and click Add next to it on its right. Tick Content: Type in the pop-up window, and press the button Apply (all displays) near the bottom. In the next pop-up window, in the section of Content types, tick Blogpost (One of must be ticked in the left-hand box in default), and press the button Apply (all displays) near the bottom. You now see a new criterion of "Content: Type (= Blogpost)" added to the FILTER CRITERIA. This means this Blog-index View will show the content-type of Blogpost only.

  3. At the top of the middle column of the table, it is the PAGE SETTINGS section. The first row is Path: /frontpage. Click /frontpage, and replace the word frontpage with blog. press the button Apply. This is the path (URL) of this View page.

  4. At the top of the middle column of the table, the row below the previous one (now Path: /blog) is Menu: No menu. Click No menu, and tick "Normal menu entry" in the pop-up window. Other forms will appear to the right. Input in the Title form: Blog. Choose "Main menu" in the drop-down section of Menu. Press the button Apply.

  5. Press the button Save near the top.

Now, open http://www.example.com/blog and you will see the collection of teasers of your blog posts.

Screen Shot: Creating new Views

The Views configuration panel, before saving.

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 Save configuration.

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 Demonstrate block regions (Bartik) 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.

First, click the word Add block near the top just below the word Demonstrate block regions (Bartik). Then, configure as follows:

  1. In the second form "Block description", write Welcome banner
  2. In the main form "Block body", write a message of your choice, for example, Welcome to my website!
  3. In the main form "Block body", write, for example, Welcome to my website!
  4. In the REGION SETTINGS section, for the Bartik (default theme) drop-down list, choose Featured
  5. In the Visibility settings (the table with multiple-tabs, near the bottom of the page), in the Pages tab (open in default), tick "Only the listed pages" and input in the form below: <front> (n.b., both ”<“ and ”>“ are indispensable)
  6. Press the button Save block 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:

  1. At the checkboxes in the section of PAGE TITLE, tick both Append page title and Use plain text page title crumb.
  2. In the section of MENU STRUCTURE, tick Use the menu structure to set the breadcrumb trail, and highlight everything in the Menu name below.
  3. In the section of TAXONOMY STRUCTURE, tick
    • Use 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
  4. Immediately below it, for the radio button of Include or exclude taxonomy-based breadcrumbs for the following node types in the section of TAXONOMY STRUCTURE, tick Include.
  5. Press the button Save configuration at the bottom.

Screen Shot: Custom-Breadcrumbs configuration

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:

  1. In the Node type drop-down list, select Blogpost.
  2. In the Titles, input Blog
  3. In the Paths, input blog
  4. Press the button Save 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 Use search and Use advanced search tick the boxes for both AUTHENTICATED USER and ANONYMOUS USER. Don't forget to press the Save permissions button at the bottom.

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 Post comments for ANONYMOUS USER. You may also want to tick the box for Skip comment approval. In default, any comment by anonymous visitors is moderated by the administrators.

Screen Shot: Permission configuration

Permission configuration for commenting by anonymous users.

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 . User login block is at Sidebar first region. In the second-column (REGION) drop-down menu, select - None - Press the button Save block at the bottom.

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.

Screen Shot: Final blog index page

Final Blog-index page viewed by an anonymous user.

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!