[WIP] aWanderingIllusion Blog

Hey guys,

In response to @Atomic_Charge, I've decided to share with you guys my current project which is essentially a personal blog. This project is more of a journey I'm preparing to start without really knowing how substainable the destination will be. What does that mean? Well, I've done a personal blog before on a managed VPS using Wordpress as a backend and my own theme as a front end. The reality was that building it was fun, but I lost motivation to write shortly after finishing the development. Third time's a charm I suppose, so let's jump in it shall we! I'll write my progress as I progress.

There's three major acts to this project:


Infrastructure

Involves securing the hardware necessary to house the website.

Step 1 will the easiest and the quickest. I just need to secure an unmanaged VPS with 512 MB of ram, 15 GB of SSD space from the Netherlands for about 7 bucks a month with RamNode. The only reason it's so cheap was because it's unmanaged, meaning I'm the one that takes care of the underlying operating system. I prefer it that way because it gives me much more control over what's underneath, which will allow me to really understand what's involved in hosting a website. Here are the specs for the KVM environnement:

Intel E3 (2 Cores @ 3.3GHz)
512MB RAM
15GB SSD
1Gbps Port
2000GB Bandwidth
1 IPv4 Address
/64 IPv6


Configuration

Involves configuring the whole system, basically getting a server up and running to host wordpress. The server OS will be ArchLinux.

The basic configuration of the system is as such:

The filesystem used will be btrfs with an underlying dmcrypt block underneath it. The idea of encryption is simply by principle. It being a KVM, it's isolated from the rest of the RamNode server, but it's still nice to know that everything encrypted for security's sake. I'm still not sure about going the btrfs route. All of the RAID is handled by the server, so I'm simply using it out of habit and the subvolume function (for backups to my backup server it will be especially useful). At least I'll know if there's any corruption issues. Thus, the filesystem scheme will be this:

The webserver used will be Apache, with the latest version of PhP and mySQL. Unfortunately, my experience with hosting servers are limited to local XAMPP testing servers. So, this will indeed be a learning experience for me. As for administration, I'll look into phpmyadmin. Still a lot of research to figure the details.

For backups, I'll have a script that will automatically send an update to my home base through btrfs' send function via SSH. For the first transfer, it'll take a while, but after that it will be a breeze.


Website

Involves getting wordpress up and running, with its own theme, etc.

The site design and cofing is gonna take a while. The actual configuration of Wordpress will be a breeze, but designing and coding the site will be the challenge. I'm still not sure on what kind of design I'm aiming for. The point of this blog is for me to publish my bash scripts, write about technology, linux and life, share my photography and other creative affairs (like cooking). My last blog was structured around three categories: Thoughts, Projects and "Wanderings" (logs of my hikes, such and such).

Here's are some old design mock-ups I did some time go.


The idea was that according to the type of content you were checking it out, the layout tree would be different. For example, in the case of the Wanderings (planing to travel a lot to. So travel logs would go there), the first page of its level would be 1x3 grid of photos of the past "adventures", and the top one would be the current one.

For thoughts, it would would skip to the "article" type page, which would 3x2 tiles of a photo a quick summary of the article.

Obviously the last layer would be the article itself.

The main issue with that was how divided the site became. It became aWanderingIllusion - Wanderer's Edition, when you were checking out my current "expeditions" (If only I did them, the projects I had x) )

Anyways, the questions stands if I should just design a 2x3 grid article, or perhaps a big 1x3 grid. Either way, I'm still wondering how I'll present my articles, whether it's a new script, essay on the environement, or a new cooking recipe. It just seems way to personal of a site to have organisational trees, yet it's a site, thus it should have one.

For the technical specs of the rest of the WP configruation, I'm going to deal with it later.


That's those three steps. By April 4th, I should be there. I'd appreciate thoughts concerning the website design.

3 Likes

I only recently began to dive into web dev. While I will not be able to be of much help, maybe @Alamar, @Eden and some other web devs here could chime in on this. Looks very promising. Having a plan before you start is really cool. Good luck, I will put it in as a WIP

ftfy :D

Seriously though, I've done quite a bit of web design in the past, but its always been only a side hobby. I usually start designing a site, things get bigger and more insane, and then something shiny runs by or an interesting game is released and I lose track of things. I'm very interested to see how this goes though. Don't hesitate to ask any questions whatsoever about the design portion. We have some really knowledgeable web design folks here.

Awesome ^^

My main dillemma right now is how to make my site content forward while keeping it organized. By content forward, I mean that the second you go on the site, you have articles popping up. But, I don't want it to be a simple "scroll down to next article" design. There's one thing that's clear, there shouldn't be a website portal, it should go directly to echoing articles. That means the main page will be filled up. An idea I was exploring in the past is to have the most recent articles per category on the main page, while being able to explore the older articles by clicking the different menu options. Someting like this:


What do you think about this being the first page?

Hey guys, here's an update!

Well, I got the server and running two weeks ago, and today I decided to tackle the server installation and configuration. So, I bunkered down with the following configuration:

  • Archlinux as distro
  • linux-grsec as kernel
  • Apache as my web server
  • MariaDB as the mySQL server
  • PHPMyAdmin as my SQL configuration frontend

So, with a few hours of working, I finally got to this lovely, empty screen

Now, there's a lot of things I'm sure I missed during the config. I almost exclusively followed the ArchLinux wiki for all of my info. The server itself, I think, requires some work to get the security up to spec. Eventhough I'm using the grsec patchset, the Mandatory Access Control isn't activated I believe. Regardless, I do believe I need to read up more on what grsec entails to be able to take advantage of it.

Next thing to take care of is getting the domain up and going... which should be easy.

And after! Web design!

Thoughts?

1 Like

NIce work so far. Looking forward to more screenshot of the initial formatting and design steps you are thinking about. Perhaps some of the folks more familiar with configuring Arch servers could help out at the current stage.

Hey Alamar,

I've just finished up with my header. Been doing some preview design in GIMP. What do you think?

Preview of header for 2160p screens

Preview of header for 1080p screens

I'm a bit nervous about having an image background, but I'm trying to include one because I'm trying to strike an "expansive" feel to my blog. I might scrap the whole thing and go a more minimalistic route, but I like the idea of a half transparent panel on a monochrome grey background. The inclusion of the 2160p example is just to give an idea of how the background dilutes in darkness. How I managed it in a vertical context is like the following:

Vertical example of background

As you can see, the background sorta fades out to fade back into the next part. I'll have to figure out how to only load the background needed by the user. The full background is something like 7MB, which is something a mobile user would hardly need. Probably going to have to play with javascript for that one.

For the website itself, I'm aiming for a 1080 pixel width for supra-1080 browsing (desktop) and a dynamic width for sub-1080 browsing (mobile)

The design looks pretty good. I'm not up-to-date on the current best practices as far as fluid design and scaling goes. I believe that you'd want to make sure that key formatting items are percentage-based so that things scale properly or you are using separate CSS for different screen sizes.

Perhaps @sarhatabaot could help you out with most of your formatting questions

Indeed, I have no knowledge of what's best practice except examples on the web. In fact, I've just finished a design for the homepage. I'm still playing with some things but I like it so far. Here it is:

I'm thinking that the big main square is the latest post, and the other 3 squares represent the latest of the other categories. So, say there's a latest post in my essays, it will take the main podium, and the latest post of each other categories will take the lower podium to have expositions of all the available types of content. (So we have content forwardness, with site unity, while still having categories).

Once I'm at the CSS stage, I'll certainly look for your reference's help.

Anyways...I think it's about time I sleep. I'll work on the category pages tomorrow.

1 Like

You're going to have to wait till next week for me. As I won't be home till Thursday.

No worries, I'm still at the design stage (which will likely take another week because of lack of free time), and I'm pretty okay with CSS so I should get by at the beginning.

New update, got the category page done as well as the home page. Here are the two previews:

Homepage

Category pages

The "older post" page will be go away with the popular posts section and present the articles in a 2x2 grid.

1 Like

Well, we're the 7th of April, the deadline is basically now. So, where's the website? Well, the website is up and running at:

awanderingillusion.com

with a stock theme. For the most part, I lack the time to design and code the theme (School, work, exercise and friends take up my time). But, summer is coming up soon which means I'll be able to continue the design. Now, what about the blog?

What I'm wanting to start doing is make time for myself to write. Write about anything and everything I feel like writing. I'm considering sleeping half an hour less to make time for writing, so the fruits of my labour will find itself on the blog.

Hope the results are satisfactory ^^