My github pages site is not applying the bootstrap jekyll theme - github-pages

My github pages site is not applying the boostrap jekyll theme, instead it looks like basic html.
the site is published here: https://toneman1984.github.io/HeatherBlogV2/
the repository is here: https://github.com/toneman1984/HeatherBlogV2
I feel like it has to do with my _config.yml file, specifically the url and base url settings and/or the settings in GitHub.
these are my config.yml settings:
title: Clean Blog
email: your-email#example.com
description: A Blog Theme by Start Bootstrap
author: Start Bootstrap
baseurl: "HeathersBlogV2"
url: "https://toneman1984.github.io/HeatherBlogV2/"
# Social Profiles
twitter_username: SBootstrap
github_username: StartBootstrap
facebook_username: StartBootstrap
instagram_username:
linkedin_username:
# Add your google-analytics ID here to activate google analytics
google_analytics: UA-XXXXXXXXX-X # out your google-analytics code
# Build settings
markdown: kramdown
paginate: 5
paginate_path: "/posts/page:num/"
plugins:
- jekyll-feed
- jekyll-paginate
- jekyll-sitemap ## Uncomment this line to silently generate a sitemaps.org compliant sitemap for your Jekyll site
theme: jekyll-theme-clean-blog

Related

django 4.1 tutorial how to change the link on the admin page header from http://localhost:8000 to http://localhost:8000/polls/

In the Admin pages of the Polls Tutorial there is a link to "View Site" that has the URL http://localhost:8000/ but it should be http://localhost:8000/polls/ to list the polls in the indexView class.
I could not find where to change that View Site link.
Right now with the Polls Tutorial done and all working except this last little bit I want to get it done to use as a reference.
http://localhost:8000 now gives...
Using the URLconf defined in mysite.urls, Django tried these URL patterns, in this order:
polls/
admin/
The empty path didn’t match any of these.
The best way for me was to change the "View Site" link in the admin header.
go to admin.py and set
admin.site.site_url = 'http://localhost:8000/instruction/'

Django - page not found with VueJS [duplicate]

This question already has answers here:
Handling single page application url and django url
(7 answers)
Closed 1 year ago.
I'm trying to create a SPA with Vue in my Django project, so that Django handles only authentication templates and the rest of the frontend is entirely Vue rendered by webpack-loader, so it's Django rendering the Vue app. I'm doing this in order not to lose the benefits of having authentication handled entirely by Django.
So everything below /accounts/ will be handled by Django templates rendered by django views, while everything below /app/ will be handled by the Vue application.
I have the following:
urlpatterns = [
# Some standard django templates url here for authentication..
# ...
# The Vue app:
path('app/', views.vueApp, name='vueApp'),
]
So when the user navigates to mysite.com/app, Vue will handle the whole frontend as a SPA with its routes:
//main.js
const router = new VueRouter({
base: '/app',
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/test1', component: testcomponent },
{ path: '/test2', component: test2component }
]
})
The problem with my code, is that if i click on a link to test1 or to test2 from inside the Vue app, i will get redirected to testcomponent (mysite.com/app/test1) and test2component (mysite.com/app/test2); instead, if i open my browser and i navigate directly to mysite.com/app/test1 or mysite.com/app/test2 i will get a Page Not Found error by Django, i think because Django thinks i'm trying to reach a standard Django url, while instead i'm trying to reach an URL handled by my Vue app.
Is there any way to solve this? Thanks in advance!
To deal with this, you need a catch-all route to ensure that you capture everything after that / in your url as well. Otherwise it looks like your url is not a match. You need something like this (if you're using regex to match):
path('app/?.*$', views.vueApp, name='vueApp'),
This should match everything that starts with app/ and has other stuff after it as well. You don't care about capturing that stuff with django bc the vue router will handle it from that point.
ETA:
If you're NOT using regex, I think you can use this format to accept whatever comes after the slash:
path('app/<path:rest_of_path>', views.vueApp, name='vueApp'),

Facebook fetching incorrect OG tags for NextJS project deployed on Vercel

I have built my project using NextJS and deployed it on Vercel. My project's Vercel URL is https://my-project.vercel.app. My domain (added to project settings in Vercel dashboard) is www.example.com
When I use Facebook Sharing Debugger to inspect the meta tags on a particular url, the meta tags are picked up correctly when using the my-project.vercel.app domain and not my actual domain www.example.com. The project loads correctly in the browser , including meta tags, for both domains.
For example, for a url /foo on my website, the og tags are picked up correctly for https://my-project.vercel.app/foo but not for https://www.example.com/foo.
Have a look at these screenshots. Note that the domain shown in the screenshots (esourcing.in) is added to the project esourcing-frontend.vercel.app, in the Vercel dashboard.
Here is the screenshot from my browser:
Answering my own question. There was a bug in my code
The bug
I am using a Wrapper component to wrap all my pages. I was setting the og_url after componentDidMount. I am using a functional component so the useEffect hook executes after component mount. Until that happens I set the og_url to https://example.com.
However this component mounting never happens when the page is crawled by Facebook. So you can imagine that the og:url property was being set to https://example.com for all pages when the Facebook crawler scraped these pages.
import Head from "next/head";
import { useEffect } from 'react'
const Wrapper = (props) => {
const [og_url, setog_url] = useState("")
useEffect(() => {
setog_url(window.location.href)
}, [])
return (
<>
<Head>
... other meta tags ...
<meta property="og:url" content={og_url ? og_url : "https://example.com"} />
</Head>
{props.children}
</>
)
Fix
og:url essentially tells Facebook that forget the OG tags on this page and use the OG tags from the page whose url is set to the value of og:url. I set the og:url to "" and now the sharing debugger picks up the right OG tags.

How to display the site's user friendly name in a template in Django?

I am searching for a way to display my Django-CMS site name in a template.
I created a basic Django-CMS site following this guide. The default site is named Example.com and I was able to change this name, from within the admin section, to "My Super Site".
Following what, I tried to customize and apply a theme to it, following this guide. It suggests to use {{ request.site.name }} to display the name of the site on a page. However this turns up empty and so does {{ request.site }}.
I searched further and found several pages approaching the subject with increasingly complicated propositions the older they were. Recent ones, like this one, suggested that this was not related to django-cms but to django itself and the sites framework.
I looked into the documentation, particularly this page and this one which, if I understood properly, indicates that the site middleware, once activated, includes a site object in the request object available in the templates. I checked and the sites framework is enabled ('django.contrib.sites' in INSTALLED_APPS setting, SITE_ID defined and migrate ran). So, I don't understand why {{ request.site }} is empty.
To clarify things, I am not looking for the domain name or the host. I am looking for the user friendly name, the one found in django-cms under 'Display Name' in the 'Change site' section of administration/sites.
Thank you for your help.
make sure to add 'django.core.context_processors.request' to your context processors.
Like so:
TEMPLATES = [
{
...
'OPTIONS': {
'context_processors': [
...
'django.core.context_processors.request',
],
},
},
]
Also add django.contrib.sites.middleware.CurrentSiteMiddleware to your MIDDLEWARE settings.
For newer version of django ie.. >3, only adding
'django.contrib.sites.middleware.CurrentSiteMiddleware',
to the MIDDLEWARE in settings.py works. Then call
{{request.site.name}}
in your template.

Browsersync server - Need different paths to html and css for reload

The problem is that my index.html won't load a css file from a sister folder. I've tried a variety of Browsersync options and none worked.
Into my second day trying to figure this out. I'm working in the Flask framework for Python which works something like Laravel, etc. My task manager is Gulp, front end framework is Foundation 6. I'm new to Flask and Gulp. I used to use Grunt and Livereload with Laravel some years ago and had scss and browser reload working then. Memory fades though.
My file structure is supposed to be typical Flask, just the relevant folders here:
-root
-app
-static
-css
-js
-templates (html files)
-foundation (scss files and framework)
Browsersync seems to be designed so you have to have css under the html files. I've tested this with an index.html in the /root and /app folders and it works. However, I need / want the html in /templates.
In /app/templates/index.html:
<link rel="stylesheet" href="../static/css/app.css">
I'm using both command line for Browsersync and Gulp.js files in the root and in /foundation.
The Browsersync server will serve html from /templates if I set it up with "app/templates" but then it can't find the css. If I move /static/css into /templates the proper index.html file is rendered nicely in the browser. So Browsersync works with the old pre-app framework layout. It just can't deal with paths to sister folders.
gulp.task('serve', ['scss'], function() {
browserSync({
server: "app"
});
gulp.watch(src.css, ['scss']);
gulp.watch(src.html).on('change', reload);
});
I've considered their proxy option but so far can't find a solution with that. I haven't found many setup examples online and none were useful.
For now I'm just doing desktop layout of the app's html pages with Foundation 6 and haven't set up a dev server, just a folder on my MBP.
Any ideas? Please :-)
You can provide multiple base directories from which to serve static files
server: {
baseDir: ["app/templates", "static"]
}
this will server app/templates/index.html by default and then in your html just use
<link rel="stylesheet" href="/css/app.css">
This is my final working gulpfile.js in the site root and setup to work with Flask or most other application frameworks plus Foundation 6. Hope this example saves someone a day or more of figuring this out. I'll add js files later.
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var reload = browserSync.reload;
var src = {
scss: 'foundation/scss/*.scss',
css: 'app/static/css/app.css',
allscss: 'foundation/scss/**/*.scss',
cssdest: 'app/static/css',
html: 'app/templates/*.html'
};
var sassPaths = [
'foundation/bower_components/foundation-sites/scss'
//'foundation/bower_components/motion-ui/src'
];
gulp.task('serve', ['sass'], function() {
browserSync({
open: false,
server: {
baseDir: ["app/templates", "app/static"]
}
});
gulp.watch([src.scss, src.allscss], ['sass'])
gulp.watch(src.html).on('change', reload);
gulp.watch(src.css).on('change', reload);
});
gulp.task('sass', function() {
return gulp.src(src.scss)
.pipe($.sass({
includePaths: sassPaths
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest(src.cssdest))
});
gulp.task('default', ['serve']);