How I Built a Drupal 8 site in 1 Day

Submitted by Katelyn.Fogarty on Wed, 05/11/2016

How I Built a Drupal 8 site in 1 Day

Web Manager's Digest

Originally posted: https://www.acquia.com/blog/digital-marketer%27s-digest/how-marketer-built-drupal-8-site-1-day/03/05/2016/3294361

When I decided I was going to start my own blog of course I wanted to build the site myself. I used to be a pretty technical person previously in my career, but the last time I built a Drupal website from start to finish was with Drupal 5 way back in 2009 for my accountant’s website. Today I manage eight corporate websites built by an engineering team, focused on their performance, optimization and design to support the goals of the business; all of which is very different from building new ones from the ground up. Going into this project I had a general idea of which files belonged where in Drupal and I knew where I should start, but building it on the latest version of Drupal -- Drupal 8 -- is a full three Drupal versions “newer” than the last time I looked at any file structures or theme folders first-hand. I was pleasantly surprised at how it went. There were a few hiccups that I’ll go through in some detail later, but this post is about how a non-developer web manager built a Drupal blog in one day with no code edits or command line fun needed (well very little command line work as I’ll explain in a bit).

Why Drupal and not Wordpress?

My manager and I had a long discussion on what platform I should use, I know this sounds silly: since I work at Acquia -- which was founded in 2008 by the inventor of Drupal, Dries Buytaert -- we should always use Drupal, right? Well the thought was since this is a lightweight and simple blog maybe Drupal has more features than I needed. The priority for me in addressing the use-case for this project was getting blogs posted and optimizing my content so search engines and you, dear reader, could find it. We discussed Wordpress because they are known to be great for blog websites -- he’s been blogging on Wordpress since it was in beta -- and Wordpress is famously simple and quick to set up. We agreed that if I couldn’t set up a Drupal website within a day, then we would look elsewhere for a solution to meet my needs. Long story short: Drupal is what my new personal blog website is running on today.

Where I started:

Step 1: Download Acquia Dev Desktop

I knew I was going to start with Drupal 8 since it is the latest version of the 15-year old CMS. Sure, Drupal 6 is my favorite version of Drupal -- mainly because I really learned the power of drupal while working on Drupal 6 sites but I’ve managed a Drupal 8 site for over a year, and the majority of the sites I’m responsible for are still on Drupal 7 with a planned replatforming to Drupal 8 in the next 12 months. I started by going to drupal.org and downloading the tar file for Drupal 8. I decided to build this project locally on my MacBook since I didn’t have any hosting solutions in mind and but wanted to start building right away. I went to dev.acquia.com -- Acquia’s Developer Network -- and downloaded the latest version of Acquia Dev Desktop. I knew about Acquia Dev Desktop from working at Acquia, it is a great and very simple-to-use tool that sets you up with a Drupal website running locally on your computer so you don’t need hosting right away. My manager, who has been building sites on his own since 1994 and HTML 1.0, claims Dev Desktop is one of the more impressive web building tools he’s ever used. I agree and think one should actually start with Acquia Dev Desktop because it has many Drupal distributions right in it that one can start with. A “distribution” -- for those new to Drupal -- is a preconfigured version of Drupal’s core that has been customized with modules (Wordpress people can think of modules like “plug-ins) and themes for a particular scenario. There are distributions for publishing, government, intranets. Distributions are a great way to jump start a project for a particular use case. Image removed. Using Dev Desktop I had my base Drupal site running on my MacBook within minutes. With the Installation of Drupal 8 done, now it was time to make it pretty.

Step 2: Choose a theme

I needed a theme for what my site would look like in terms of layout and design. Two columns or three columns? Big hero image in the header or not. Fonts and palettes, all are provided in a theme and contributed to the Drupal.org library by their creators. I’m not a front-end developer and I don’t have the time to design my own site from the ground up, so I went back to drupal.org and started looking through Drupal 8 themes. I found one that caught my eye and downloaded it. Now what do I do with it? Ok I know there is a theme folder in my new site, I found my folders nicely arranged where they should be in my computer's main sites folder set up by Dev Desktop. There is a core folder in there, so I assume I should stay out of that but I saw there was a modules and themes folder off the root directory. Those looked about right and when I clicked into them they had a “readme.txt file inside with some clear instructions confirming I was right where I needed to place my new theme folder. I downloaded the theme I picked, unzipped the files and dragged them into my themes folder. That didn’t magically apply the new theme. So what else did I need to do? Simple: I loaded up my website (you click a link in Dev Desktop and it brings you to your site, you can manage multiple projects with the tool) and went into “appearance” and here was my new theme with an install link. I installed it, took a look, but didn’t like it, so I went back and repeated the process all over again until I found a theme I could live with. Image removed.

Step 3: Add modules

The nice thing about Drupal 8 is it comes with a lot of what you need built in, modules such as views which gives you the power to dynamically pull content through your site and some default WYSIWYG editors so I don’t need to worry about those modules. My main concern was SEO, the module I use across all of my other Drupal sites is called Metatag and it was available for Drupal 8 so I downloaded it. This process is similar to your themes, you unzip the tar files and place them into the modules folder, then go to your extend page and check them off to enable them. Here is the list of modules I installed on my blog site:

  • Pathauto: this creates friendly URLs based on the title of your content. The default page URLs in Drupal is node/1 so you understand why this is important for SEO and vanity.
  • Redirect: this allows you to 301 redirect old URLs to new URLs. I didn’t immediately need this module since it is a new website, but if you decide to rename a post or delete old content and point it to newer content, you will need this module. Very handy.
  • reCAPTCHA: since this is a blog site, I wanted something to help prevent against spammers hitting my comments and this is a known module that works well.
  • Acquia Connector: I knew I was planning to start my site on Acquia Cloud Free and you need this to connect to Acquia’s services.

In summary here are my build steps:

  • Download Acquia Dev Desktop from dev.acquia.com
  • Install Drupal 8 from a .tar file downloaded from Drupal.org or through Dev Desktop
  • Find the right theme and modules from the library at Drupal.org
  • Put the theme and modules into the right folders
  • Go to the site and install them (via the “extend” and “appearance” sections)
  • Celebrate a living, albeit local site!

Step 4: Hosting

Next, where do I want to host this site? I honestly was thinking about using Godaddy since that is where I had hosted personal sites in the past and the service is fairly inexpensive. I use Acquia workflow tools in our Cloud product daily and I have come to appreciate the ease of drag and drop and having dev and stage environments for testing. I probably don’t need that for my small blog site BUT they are nice to have and they are what I’m used to. So I decided I would host the blog on Acquia Cloud Free -- Acquia’s free sandbox for developers and builders to test and experiment with. Now how to move my local site off of my Mac into ACF. There is a link in Dev Desktop to make that migration happen. Alas, this is where I ran into issues and my technical abilities started to fail me. I created my free tier account on Acquia Cloud Free. Easy. I added the Acquia connector module to establish a connection between Dev Desktop and ACF and enabled it. Easy. Then I clicked the button in Dev Desktop to launch my local blog on Acquia Cloud Free, and discovered I needed an SSH key. What is an SSH key and what do I need to do with it? An SSH key sets up an encrypted secure connection between your computer and the server you are trying to push code to. There was a helpful link next to the SSH field in Dev Desktop to some documentation. It walked me through the steps to create my key. I figured it out. I had this long key and a field to enter it into in Acquia Cloud Free but my key file was too large. Why? I thought I followed the steps, but I was stumped and I had to ask for help. Luckily there was another page of documentation on how to do this. It turns out you needed to do the SSH Key via the command line (aka the “terminal window”). Command lines are scary to me, I don’t want to kill my computer with a bad command, after all the graphical interface was created for people like me and that’s what I want to use. There is a 1-click button to launch terminal in Dev Desktop, so I did that, and then I followed step by step of the documentation for compressing my SSH key. It took me six tries before I got it to work. Why six? I was blindly copy and pasting lines out of the documentation and not reading it, because I didn’t know what any of it meant. There was a line there that said [user.name] and I was suppose to replace it with my user name. After some trial and error I realized that it had worked and I finally possessed a compressed key file that was accepted. I was up and running on Acquia Cloud Free. My next step is to share this scenario with the Acquia product team responsible for ACF, (there must be a good reason for it) but man oh man that was almost the end of my site. Once on Free Tier I now needed a version control tool to push my code from my local environment to my server. My developer here at Acquia says you just use Drush in command line. Oh no I don’t. No more command line please. There must be a nice and easy free tool that can help me. There is: SourceTree does just that. You download it for free, connect your site which was easy and then whenever you update or add new files to your local project, it automatically sees the changes and you can select the files that changed and push a button that says “commit.” You can enter a note as to what you changed or added and you’re all set. I was then able to push code to my dev environments and drag it between dev, stage and prod.

Quick Wrap-up

The tools I am using:

Theme I’m using:

Modules I'm using:

Done, a Drupal 8 site in a day. This experience was a struggle, but a satisfying and exciting in the end. I pushed my technical abilities, hit some roadblocks, but ultimately I was able to launch a Drupal 8 website pretty quickly using Acquia’s tools. I personally love Drupal and the power and freedom behind it, but also understand there is a bit of a learning curve to getting started, especially if your non-technical. I hope this blog helps guide some folks like myself into kickstarting some websites, but let me know about your experiences, tell me which modules you're using or how you’ve overcome some small Drupal hurdles. Image removed.

Tags

Add new comment